Skip to content

A
Athena
Commit c40bdd5c authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

no message

parent ba8e3e9e
Hide whitespace changes
Inline Side-by-side
Showing with 410 additions and 81 deletions
src/components/IntegralMall/IntegralMall.vue
View file @ c40bdd5c
...@@ -46,77 +46,14 @@ ...@@ -46,77 +46,14 @@
</el-row> </el-row>
<recommend/> <recommend/>
</div> </div>
<div class="_block"> <div class="_block" v-for="item in ClassifyGoodsList">
<el-row class="tit"> <el-row class="tit">
<div> <div>
<img src="../../assets/img/ps/shafa.png" alt=""> <img src="../../assets/img/ps/shafa.png" alt="">
<p>家纺家饰</p> <p>家纺家饰</p>
</div> </div>
</el-row> </el-row>
<commodity2/> <commodity2 :data="item"/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/jiaju.png" alt="">
<p>家居日用</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/chuju.png" alt="">
<p>厨具锅具</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/canju.png" alt="">
<p>餐具水具</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/shuma.png" alt="">
<p>数码生活</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/muying.png" alt="">
<p>母婴亲子</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/xiangbao.png" alt="">
<p>箱包手袋</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/shishang.png" alt="">
<p>个护时尚</p>
</div>
</el-row>
<commodity2/>
</div> </div>
</el-row> </el-row>
</el-row> </el-row>
...@@ -138,8 +75,26 @@ export default { ...@@ -138,8 +75,26 @@ export default {
}, },
data(){ data(){
return{ return{
ClassifyGoodsList: [],
} }
},methods: {
getClassifyGoods: function () {
this.apiJavaPost(
"/api/goodsMarket/getClassifyGoods",
{id: ''},
res => {
if (res.data.resultCode === 1) {
this.ClassifyGoodsList = res.data.data;
} else {
this.Error(res.data.message);
}
},
null
);
}
},
mounted() {
this.getClassifyGoods()
} }
} }
</script> </script>
src/components/IntegralMall/block/commodity2.vue
View file @ c40bdd5c
...@@ -77,8 +77,7 @@ ...@@ -77,8 +77,7 @@
export default { export default {
components: { components: {
}, },
props:{ props:['data'],
},
data(){ data(){
return{ return{
list: [1,2,3,4,5,6,7,8] list: [1,2,3,4,5,6,7,8]
......
src/components/IntegralMall/confirOrder.vue
View file @ c40bdd5c
<style> <style>
.confirOrder{ .confirOrder {
background-color: #f5f5f5 background-color: #f5f5f5;
}
.confirOrder .bar_box {
padding: 30px 60px;
}
.confirOrder .bar_box ._bar {
position: relative;
height: 26px;
}
.confirOrder .bar_box ._bar ._bar_d {
position: absolute;
z-index: 2;
}
.confirOrder .bar_box ._bar ._bar_d._bar_d_r {
right: 25px;
}
.confirOrder .bar_box ._bar ._bar_n {
display: inline-block;
width: 26px;
height: 26px;
background: rgba(238, 68, 84, 1);
border-radius: 50%;
color: white;
line-height: 26px;
text-align: center;
position: absolute;
z-index: 2;
font-size: 12px;
}
.confirOrder .bar_box ._bar ._bar_n._bar_two {
background-color: #dddddd;
}
.confirOrder .bar_box ._bar ._bar_line {
width: 100%;
height: 3px;
background: rgba(221, 221, 221, 1);
position: absolute;
top: 12px;
z-index: 1;
}
.confirOrder .bar_box ._bar ._bar_line ._bar_line_son {
width: 50%;
height: 3px;
background: rgba(238, 68, 84, 1);
position: absolute;
top: 0;
z-index: 3;
}
.confirOrder .bar_box ._bar ._bar_text {
position: absolute;
font-size: 12px;
left: -11px;
top: 30px;
width: 50px;
color: rgba(238, 68, 84, 1);
}
.confirOrder .bar_box ._bar ._bar_d_r ._bar_text {
color: #999999;
}
.confirOrder .address_box {
background-color: white;
border: 1px solid rgba(236, 236, 236, 1);
font-size: 16px;
margin-top: 25px;
}
.confirOrder .address_box .address_tit {
padding: 15px 20px;
border-bottom: 1px solid rgba(236, 236, 236, 1);
}
.confirOrder .address_box .address_info {
padding: 30px 20px 10px 20px;
}
.confirOrder .address_box .address_info .address_info_item {
border: 4px solid #dddddd;
border-radius: 4px;
padding: 10px 15px;
font-size: 12px;
cursor: pointer;
margin-bottom: 15px;
}
.confirOrder .address_box .address_info ._active .address_info_item {
border-color: rgba(238, 68, 84, 1);
}
.confirOrder .address_box .address_info .address_info_item .item_name {
padding-bottom: 8px;
border-bottom: 1px solid #e9e9e9;
margin-bottom: 8px;
font-family: "PingFangR";
}
.confirOrder .address_box .edit_addr {
margin: 10px 0;
height: 33px;
}
.confirOrder .address_box .edit_addr .edit_addr_btn ,.details_box .edit_addr_btn{
padding: 7px 24px;
background: rgba(238, 68, 84, 1);
border-radius: 4px;
font-size: 14px;
cursor: pointer;
color: white;
}
.confirOrder .address_box .edit_addr {
padding-top: 10px;
}
.confirOrder .address_box .edit_addr .edit_addr_btn.edit_addr_btn2 {
margin-left: 100px;
}
.confirOrder .address_box .form_box {
padding: 25px 60px;
}
.confirOrder .address_box .form_box .demo-ruleForm {
width: 880px;
}
.confirOrder .product_box {
margin-top: 30px;
}
.confirOrder .product_box .product_item{
display: flex;
}
.confirOrder .product_box .product_item .img_box{
width: 80px;
height: 80px;
overflow: hidden;
text-align: center;
margin-right: 10px;
}
.confirOrder .product_box .product_item .img_box img{
height: 80px;
}
.confirOrder .product_box .product_name {
color: #333333;
}
.confirOrder .product_box .product_color {
color: #999999;
}
.confirOrder .product_box .sunm p{
text-align: right;
padding: 20px;
font-size: 12px;
color: #333333;
border: 1px solid #ECECEC;
border-top: none;
background-color: white;
}
.confirOrder .product_box .small_s {
font-size: 14px;
color: #FF0101;
}
.confirOrder .product_box .small_s span{
font-size: 18px;
}
.confirOrder .details_box{
margin: 30px 0;
padding: 30px 20px;
border:1px solid rgba(236, 236, 236, 1);
font-size: 12px;
text-align: right;
background-color: white;
}
.confirOrder .details_box .details_box_info {
line-height: 28px;
color: #999999;
}
.confirOrder .details_box .details_box_info p>span{
display: inline-block;
width: 140px;
color: #333333;
}
.confirOrder .details_box .details_box_info p>span._pay{
color: #FF0101;
}
.confirOrder .details_box .details_box_info p>span._pay>span{
font-size: 18px;
}
.confirOrder .details_box .details_box_btn{
margin-top: 30px;
}
.confirOrder .details_box .details_box_btn .edit_addr_btn{
padding: 13px 48px;
} }
</style> </style>
<template> <template>
<el-row class="confirOrder"> <el-row class="confirOrder">
<el-row class="w1180"> <el-row class="w1180">
<el-row> <!-- top -->
<el-row class="bar_box">
<div class="_bar">
<div class="_bar_d">
<span class="_bar_n _bar_one">1</span>
<span class="_bar_text">确认订单</span>
</div>
<div class="_bar_line">
<div class="_bar_line_son"></div>
</div>
<div class="_bar_d _bar_d_r">
<span class="_bar_n _bar_two">2</span>
<span class="_bar_text">订单完成</span>
</div>
</div>
</el-row> </el-row>
</el-row> <!-- addr -->
<el-row class="address_box">
<div class="address_tit">
<p>{{addressShow ? '选择' : '修改'}}收货地址</p>
</div>
<template>
<div class="address_info" v-if="addressShow">
<el-row :gutter="20">
<el-col
:span="6"
v-for="(item, index) in addList"
:key="index"
:class="{'_active': addListActive === index}"
>
<div class="address_info_item" @click="addListActive = index">
<p class="item_name">{{item.city}}（{{item.name}}）</p>
<p class="item_add">{{item.addr}}</p>
<p class="item_tel">{{item.tel}}</p>
</div>
</el-col>
</el-row>
<div class="edit_addr">
<span class="edit_addr_btn" @click="addressShow = false">修改地址</span>
</div>
</div>
<div v-else class="form_box">
<el-form
ref="form"
:model="form"
:rules="rule"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="地址：" prop="addr">
<el-input v-model="form.addr" size="mini" :disabled="true"></el-input>
</el-form-item>
<el-form-item label prop="desc">
<el-input type="textarea" size="mini" placeholder="请输入详细街道地址" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item label="收货人：" prop="name">
<el-input v-model="form.name" size="mini" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="联系电话：" prop="tel">
<el-input v-model="form.tel" size="mini" :disabled="true"></el-input>
</el-form-item>
<div class="edit_addr">
<span class="edit_addr_btn edit_addr_btn2" @click="addressShow = true">确认修改</span>
</div>
</el-form>
</div>
</template>
</el-row>
<!-- product -->
<el-row class="product_box">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="商品信息">
<template slot-scope="scope">
<div class="product_item">
<div class="img_box">
<img src="../../assets/img/img-01.png" alt="">
</div>
<div>
<p class="product_name">{{scope.row.date}}</p>
<p class="product_color">颜色：{{scope.row.color}}</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="单价" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{scope.row.name }} 积分</span>
</template>
</el-table-column>
<el-table-column prop="address" label="数量" width="80">
<template slot-scope="scope">
<span style="margin-left: 10px">* {{scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column label="小计" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name * scope.row.address }}</span>
</template>
</el-table-column>
</el-table>
<div class="sunm">
<p>合计：<span class="small_s">￥ <span>9900</span>积分</span></p>
</div>
</el-row>
<!-- details -->
<el-row class="details_box">
<div class="details_box_info">
<p>商品金额 <span>¥ 9900积分</span></p>
<p>总积分 <span>¥ 229900积分</span></p>
<p>运费 <span>0元</span></p>
<p>应付 <span class="_pay">¥ <span>9900</span> 积分</span></p>
</div>
<div class="details_box_btn">
<span class="edit_addr_btn" @click="">确认并兑换</span>
</div>
</el-row>
</el-row>
</el-row> </el-row>
</template> </template>
<script> <script>
import ChooseCity from "@/components/Ticket/ChooseCity.vue";
let telStr = /^[1]([3-9])[0-9]{9}$/;
let valiTel = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入联系手机号码"));
} else if (!telStr.test(value)) {
callback(new Error("请输入正确的手机号码！"));
} else {
callback();
}
};
export default { export default {
data(){ components: {
"v-city": ChooseCity
},
data() {
return { return {
addressShow: true,
addListActive: 0,
addList: [
{
name: "李瀚文",
city: "四川成都",
addr: "锦江区 阳光新业大厦2号楼 2302",
tel: "13800138000"
},
{
name: "王三",
city: "新疆乌鲁木齐",
addr: "新疆乌鲁木齐新平区北巷街250号",
tel: "13800138000"
},
{
name: "李吴",
city: "四川德阳",
addr: "旌阳区华山南路北段266号",
tel: "13800138000"
},
{
name: "郑秀儿",
city: "河南郑州",
addr: "管城回族区二胖大道666号",
tel: "13800138000"
},
{
name: "李瀚文",
city: "四川成都",
addr: "锦江区 阳光新业大厦2号楼 2302",
tel: "13800138000"
}
],
form: {
name: "张三四",
tel: "17602885454",
desc: "成华区光华路665号",
addr: "四川省 成都市 成华区"
},
rule: {
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
tel: [{ validator: valiTel, trigger: "blur" }],
desc: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
addr: [{ required: true, message: "请输入地址", trigger: "blur" }]
},
tableData: [
{
date: "印象推荐款--大容量抽绳化妆包+防水防潮+便携耐用+暗兜设计",
name: 20,
address: 1,
color: '白色'
},
],
OrderAddList: [],
};
},
methods: {
// 获取当前登录人收货地址
getOrderAdd: function(){
this.apiJavaPost(
"/api/orderForm/getOrderAdd",
{id: ''},
res => {
if (res.data.resultCode === 1) {
this.OrderAddList = res.data.data;
} else {
this.Error(res.data.message);
}
},
null
);
} }
},methods:{ },
mounted() {
},mounted(){ this.getOrderAdd()
} }
} };
</script> </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