yu
/
CostumingPlatform
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
zhc4dev
wangjiadong 2 years ago
parent 1f4b304e42 b85dc8c03e
commit 08133e7153
4 changed files with 433 additions and 227 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      ant-design-vue-jeecg/src/views/shopping/assets/common.css
  2. 171
      ant-design-vue-jeecg/src/views/shopping/components/Order/placeOrder.vue
  3. 482
      ant-design-vue-jeecg/src/views/shopping/pages/chengyi.vue
  4. 4
      ant-design-vue-jeecg/src/views/shopping/pages/sirendingzhi.vue

3
ant-design-vue-jeecg/src/views/shopping/assets/common.css
Unescape View File

@ -94,4 +94,7 @@ a {
.c_1B {
color: #1B1B1B;
}
.c_31 {
color: #313131;
}
.textfield {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

171
ant-design-vue-jeecg/src/views/shopping/components/Order/placeOrder.vue
Unescape View File

@ -25,22 +25,131 @@
</a-radio-group>
</a-form-item>
<a-form-item
label="Field A"
label="称呼"
>
<a-input placeholder="input placeholder" />
<a-select placeholder="请选择称呼" :value="userSex" style="width: 120px;margin-right:10px" @change="handleChange">
<a-select-option value="1">
先生
</a-select-option>
<a-select-option value="0">
女士
</a-select-option>
</a-select>
<a-input style="width:300px" placeholder="请输入姓名" :value="userName"/>
</a-form-item>
<a-form-item
label="Field B"
label="选择地址"
>
<a-input placeholder="input placeholder" />
</a-form-item>
<a-form-item
label="详细地址"
>
<a-textarea placeholder="请输入街道、门牌号码等详细地址" auto-size />
</a-form-item>
<a-form-item
label="手机号码"
>
<a-input style="width:150px;margin-right:10px" placeholder="+86 中国大陆地区" disabled/>
<a-input style="width:300px" placeholder="请输入手机号码" :value="userName"/>
</a-form-item>
<a-form-item>
<a-checkbox @change="onChange">
保存该地址至地址簿
</a-checkbox>
</a-form-item>
<!-- <a-form-item v-bind="formItemLayout" label="手机号码">-->
<!-- <a-input-->
<!-- v-decorator="[-->
<!-- 'phone',-->
<!-- {-->
<!-- rules: [{ required: true, message: 'Please input your phone number!' }],-->
<!-- },-->
<!-- ]"-->
<!-- >-->
<!-- <a-select-->
<!-- slot="addonBefore"-->
<!-- v-decorator="['prefix', { initialValue: '86' }]"-->
<!-- style="width: 70px"-->
<!-- default-value="86"-->
<!-- >-->
<!-- <a-select-option value="86">-->
<!-- +86 中国大陆地区-->
<!-- </a-select-option>-->
<!-- <a-select-option value="87">-->
<!-- +87 中国大陆地区-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<!-- </a-input>-->
<!-- </a-form-item>-->
</a-form>
</div>
</div>
<div class="addr"></div>
<div class="addr"></div>
<div class="addr">
<div class="title">
<span class="icon">2</span>
<span class="text f_18">支付方式</span></div>
<div class="pay">
<p class="f_12 c_1B">在线支付</p>
<a-radio-group v-model="paymentMode" @change="onChange1">
<a-radio :value="1">
<a-icon type="alipay" style="background:#08AAFF;color:#fff;border-radius: 2px;padding:1px;margin-right:3px"/>
<span>支付宝</span>
</a-radio>
<a-radio :value="2">
<a-icon type="wechat" style="background:#00B40C;color:#fff;border-radius: 2px;padding:1px;margin-right:3px"/>
<span>微信支付</span>
</a-radio>
</a-radio-group>
</div>
<a-checkbox @change="onChange">
需要电子发票
</a-checkbox>
</div>
<!-- <div class="addr"></div>-->
</div>
<div class="rightDiv">
<div class="order">
<p class="d-flex title">
<span class="f_14 c_999">订单小计</span>
<span class="f_14 c_31">已选 1 件商品</span>
</p>
<div class="table d-flex">
<div class="left">
<!-- <img src="">-->
<div class="img"></div>
</div>
<div class="right">
<p class="d-flex">
<span class="f_12 c_1B">关键词12定制款立领衬</span>
<span class="f_12 c_999">数量：1</span>
</p>
<p class="f_12 c_999">款式：立领，标签2</p>
<p class="d-flex">
<span class="f_12 c_999">主辅料：主料1，辅料1，叮叮叮，辅料n</span>
<span class="f_12 c_999">数量：1</span>
</p>
<p class="f_12 c_999">尺码： XXS</p>
<p class="d-flex">
<span class="f_12 c_999">定制</span>
<span class="f_12 c_999">￥35,500</span>
</p>
</div>
</div>
<p class="d-flex">
<span class="f_14 c_31">商品总计</span>
<span class="f_14 c_666">￥35,500</span>
</p>
<p class="d-flex">
<span class="f_14 c_31">运费</span>
<span class="f_14 c_999">免费</span>
</p>
<p class="d-flex title">
<span class="f_14 c_31">总计</span>
<span class="f_20 c_31">￥35,500</span>
</p>
</div>
</div>
<div class="rightDiv">1</div>
</div>
</div>
@ -50,6 +159,10 @@
data() {
return {
formLayout: 'horizontal',
userSex:'',//性别
userName:'',//姓名
value: 1,
paymentMode:'',//支付方式
};
},
computed: {
@ -75,12 +188,22 @@
handleFormLayoutChange(e) {
this.formLayout = e.target.value;
},
handleChange(value) {
this.userSex = value
},
onChange(e) {
console.log(`checked = ${e.target.checked}`);
},
onChange1(e) {
console.log('radio checked', e.target.value);
},
},
};
</script>
<style lang="less" scoped>
.placeOrder{
padding-top: 54px;
padding-bottom: 80px;
background-color: #F6F6F6;
& >.jz{
justify-content: space-around;
@ -123,6 +246,15 @@
.addr{
background-color: #fff;
padding:0 30px 30px 30px;
margin-bottom: 25px;
.pay{
padding: 47px 20px;
border-bottom: 1px solid #EAEAEA;
margin-bottom: 20px;
.ant-radio-wrapper{
margin-right: 20px;
}
}
}
.form{
background-color: #fff;
@ -131,6 +263,33 @@
}
.rightDiv{
width: 410px;
.order{
background: #FFFFFF;
padding: 24px 43px;
.d-flex{
justify-content: space-between;
.left{
width: 60px;
}
.right{
width: 250px;
}
}
&>.d-flex{
padding: 10px 0;
}
&>.title.d-flex{
border-bottom: 1px solid #E7E7E7;
padding: 20px 0;
}
.left{
.img{
background: #D9D9D9;
width: 60px;
height: 77px;
}
}
}
}
}
}

482
ant-design-vue-jeecg/src/views/shopping/pages/chengyi.vue
Unescape View File

@ -1,75 +1,76 @@
<template>
<!-- 服装类型-->
<!-- 成衣推荐-->
<div class="chengyi">
<Header fontColor="#000"></Header>
<div class="main">
<div class="jz d-flex">
<el-menu
class="el-menu-vertical-demo"
@select="handleSelet"
style="width: 10%; min-width: 140px"
:unique-opened="true"
>
<el-submenu v-for="(item, i) in typeData" :key="i" :index="item.id">
<template slot="title">
<i class="el-icon-male"></i>
<span>{{ item.name }}</span>
</template>
<el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">
<template slot="title">{{ j.name }}</template>
<el-menu-item v-for="(k, i3) in j.childrens" :key="i3" :index="k.id">{{ k.name }}</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
<div class="right">
<div class="name d-flex">
<span>{{this.current.name}}</span>
<div class="d-flex">
<el-dropdown @command="handleCommand">
<Header fontColor="#000"></Header>
<div class="main">
<div class="jz d-flex">
<el-menu
class="el-menu-vertical-demo"
@select="handleSelet"
style="width: 10%; min-width: 140px"
:unique-opened="true"
>
<el-submenu v-for="(item, i) in typeData" :key="i" :index="item.id">
<template slot="title">
<i class="el-icon-male"></i>
<span>{{ item.name }}</span>
</template>
<el-menu-item v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">{{ j.name }}</el-menu-item>
<!-- <el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">-->
<!-- <template slot="title">{{ j.name }}</template>-->
<!-- <el-menu-item v-for="(k, i3) in j.childrens" :key="i3" :index="k.id">{{ k.name }}</el-menu-item>-->
<!-- </el-submenu>-->
</el-submenu>
</el-menu>
<div class="right">
<div class="name d-flex">
<span>{{this.current.name}}</span>
<div class="d-flex">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
排序<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="heat">热度</el-dropdown-item>
<!-- <el-dropdown-item command="esteem">评分</el-dropdown-item>-->
<el-dropdown-item command="high">价格降序</el-dropdown-item>
<el-dropdown-item command="low">价格升序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <div class="iconDiv d-flex">-->
<!-- <span>价格</span>-->
<!-- <div class="icon d-flex">-->
<!-- <i class="el-icon-arrow-up"></i>-->
<!-- <i class="el-icon-arrow-down"></i>-->
<!-- </div>-->
<!-- </div>-->
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="heat">热度</el-dropdown-item>
<!-- <el-dropdown-item command="esteem">评分</el-dropdown-item>-->
<el-dropdown-item command="high">价格降序</el-dropdown-item>
<el-dropdown-item command="low">价格升序</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <div class="iconDiv d-flex">-->
<!-- <span>价格</span>-->
<!-- <div class="icon d-flex">-->
<!-- <i class="el-icon-arrow-up"></i>-->
<!-- <i class="el-icon-arrow-down"></i>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="clothDiv d-flex">
<div
class="item"
v-for="(item, index) in clothsList"
:key="index"
@click="clothDetails(item)"
>
<div class="imgDiv">
<img :src="item.imgUrl" alt="" />
</div>
<div class="clothTitle">
<p class="price d-flex">
<span class="f_16 c_333">￥{{ item.currentPrice }}</span>
<span class="f_12 c_999">￥{{ item.historicalPrice }}</span>
</p>
<p class="f_12 c_333">{{ item.title }}</p>
<p class="f_12 c_9a9b9b">热度{{ item.heat }}</p>
</div>
</div>
<div class="clothDiv d-flex">
<div
class="item"
v-for="(item, index) in clothsList"
:key="index"
@click="clothDetails(item)"
>
<div class="imgDiv">
<img :src="item.imgUrl" alt="" />
</div>
<div class="clothTitle">
<p class="price d-flex">
<span class="f_16 c_333">￥{{ item.currentPrice }}</span>
<span class="f_12 c_999">￥{{ item.historicalPrice }}</span>
</p>
<p class="f_12 c_333">{{ item.title }}</p>
<p class="f_12 c_9a9b9b">热度{{ item.heat }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -195,82 +196,64 @@
name: "男装",
childrens: [
{
id: '11',
name: "上衣",
childrens: [
{
id: '111',
name: "衬衫",
},
{
id: '112',
name: "卫衣",
},
{
id: '113',
name: "Polo衫",
},
{
id: '114',
name: "针织衫",
},
],
},
{
id: '12',
name: "外套",
childrens: [
{
id: '121',
name: "夹克",
},
{
id: '122',
name: "羽绒服",
},
{
id: '123',
name: "风衣",
},
],
},
{
id: '13',
name: "裤子",
childrens: [
{
id: '131',
name: "休闲裤",
},
{
id: '132',
name: "西裤",
},
{
id: '133',
name: "工装裤",
},
{
id: '134',
name: "运动裤",
},
{
id: '135',
name: "卫裤",
},
{
id: '136',
name: "九分裤",
},
{
id: '137',
name: "短裤",
},
{
id: '138',
name: "哈伦裤",
},
],
id: '111',
name: "衬衫",
},
{
id: '112',
name: "卫衣",
},
{
id: '113',
name: "Polo衫",
},
{
id: '114',
name: "针织衫",
},
{
id: '121',
name: "夹克",
},
{
id: '122',
name: "羽绒服",
},
{
id: '123',
name: "风衣",
},
{
id: '131',
name: "休闲裤",
},
{
id: '132',
name: "西裤",
},
{
id: '133',
name: "工装裤",
},
{
id: '134',
name: "运动裤",
},
{
id: '135',
name: "卫裤",
},
{
id: '136',
name: "九分裤",
},
{
id: '137',
name: "短裤",
},
{
id: '138',
name: "哈伦裤",
},
],
},
@ -279,82 +262,130 @@
name: "女装",
childrens: [
{
id: '21',
name: "上衣",
childrens: [
{
id: '211',
name: "衬衫",
},
{
id: '212',
name: "卫衣",
},
{
id: '213',
name: "Polo衫",
},
{
id: '214',
name: "针织衫",
},
],
},
{
id: '22',
name: "外套",
childrens: [
{
id: '221',
name: "夹克",
},
{
id: '222',
name: "羽绒服",
},
{
id: '223',
name: "风衣",
},
],
},
{
id: '23',
name: "裤子",
childrens: [
{
id: '231',
name: "休闲裤",
},
{
id: '232',
name: "西裤",
},
{
id: '233',
name: "工装裤",
},
{
id: '234',
name: "运动裤",
},
{
id: '235',
name: "卫裤",
},
{
id: '236',
name: "九分裤",
},
{
id: '237',
name: "短裤",
},
{
id: '238',
name: "哈伦裤",
},
],
id: '211',
name: "衬衫",
},
{
id: '212',
name: "卫衣",
},
{
id: '213',
name: "Polo衫",
},
{
id: '214',
name: "针织衫",
},
{
id: '221',
name: "夹克",
},
{
id: '222',
name: "羽绒服",
},
{
id: '223',
name: "风衣",
},
{
id: '231',
name: "休闲裤",
},
{
id: '232',
name: "西裤",
},
{
id: '233',
name: "工装裤",
},
{
id: '234',
name: "运动裤",
},
{
id: '235',
name: "卫裤",
},
{
id: '236',
name: "九分裤",
},
{
id: '237',
name: "短裤",
},
{
id: '238',
name: "哈伦裤",
},
],
},
{
id: '3',
name: "童装",
childrens: [
{
id: '311',
name: "衬衫",
},
{
id: '312',
name: "卫衣",
},
{
id: '313',
name: "Polo衫",
},
{
id: '314',
name: "针织衫",
},
{
id: '321',
name: "夹克",
},
{
id: '322',
name: "羽绒服",
},
{
id: '323',
name: "风衣",
},
{
id: '331',
name: "休闲裤",
},
{
id: '332',
name: "西裤",
},
{
id: '333',
name: "工装裤",
},
{
id: '334',
name: "运动裤",
},
{
id: '335',
name: "卫裤",
},
{
id: '336',
name: "九分裤",
},
{
id: '337',
name: "短裤",
},
{
id: '338',
name: "哈伦裤",
},
],
},
@ -362,7 +393,8 @@
// 目前选择的菜单
current:{
id:'',
name:''
name:'',
parrentName:''
}
};
},
@ -374,19 +406,24 @@
const indexb = this.typeData[indexa].childrens.findIndex((value, keys, arr) => {
return value.id == indexPath[1]
})
const indexc = this.typeData[indexa].childrens[indexb].childrens.findIndex((value, keys, arr) => {
return value.id == indexPath[2]
})
this.current.name = this.typeData[indexa].childrens[indexb].childrens[indexc].name
this.current.id = this.typeData[indexa].childrens[indexb].childrens[indexc].id
// const indexc = this.typeData[indexa].childrens[indexb].childrens.findIndex((value, keys, arr) => {
// return value.id == indexPath[2]
// })
// this.current.name = this.typeData[indexa].childrens[indexb].childrens[indexc].name
// this.current.id = this.typeData[indexa].childrens[indexb].childrens[indexc].id
this.current.name = this.typeData[indexa].childrens[indexb].name
this.current.id = this.typeData[indexa].childrens[indexb].id
this.current.parrentName = this.typeData[indexa].name
},
handleSelet(index,indexPath){
this.findIndex(indexPath)
//这里更改右边显示衣服的数据,通过this.current.id查
// this.clothsList
},
clothDetails(item) {
this.$router.push({
path: "/shopping/ClothDetail",
query: { id: item.id, title: item.title },
query: { id: item.id, title: item.title ,name:this.current.name,parentName:this.current.parrentName},
});
},
handleCommand(command){
@ -396,8 +433,8 @@
else if(command == 'high'){//价格降序
this.clothsList.sort(compareDown("currentPrice"))
}
// else if(command == 'esteem'){//按评分排序
// this.clothsList.sort(compare("heat"))
// else if(command == 'esteem'){//按评分排序
// this.clothsList.sort(compare("heat"))
// }
else if(command == 'low'){//价格升序
@ -405,6 +442,11 @@
}
}
},
mounted() {
this.current.name = this.typeData[0].childrens[0].name
this.current.id = this.typeData[0].childrens[0].id
this.current.parrentName = this.typeData[0].name
}
}
</script>
<style scoped>

4
ant-design-vue-jeecg/src/views/shopping/pages/sirendingzhi.vue
Unescape View File

@ -155,14 +155,16 @@
<div v-if="current == 3">
<PlaceOrder></PlaceOrder>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from "../components/Header/HeaderView";
import Footer from "../components/Footer/FooterView";
import PlaceOrder from "../components/Order/placeOrder"
export default {
name: "sirendingzhi",
components: { Header ,PlaceOrder},
components: { Header ,PlaceOrder,Footer},
data() {
return {
current: 3,

Write Preview
Loading…
Cancel
Save