1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

增加了tag

feature/feature-compatible
wangkesi 7 years ago
parent
fe19eccdf3
commit
02f229e57f
3 changed files with 224 additions and 187 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 198
      src/view/order-check.vue
  2. 188
      src/view/order-detail.vue
  3. 25
      src/view/service-card-list.vue

198
src/view/order-check.vue
View File

@ -1,83 +1,87 @@
<template>
<div class="order-check-whole">
<back-header :path="'/mall/web/vgoods/detail/'+goodsNo">
订单确认
</back-header>
<div class="top">
<div class="goods-container">
<img :src="imghost+info.goodsImgUrl">
<div class="goods-main-container">
<div class="name">{{info.goodsName}}</div>
<div class="box">
<div class="box-text">{{info.shortDesc}}</div>
<div class="box-price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
</div>
</div>
</div>
<div class="gift-container" v-if="info.gifts&&info.gifts.length>0">
<div class="gift-item" v-for="item in info.gifts">
<div class="text">【赠品】</div>
<div class="name">{{item.name}}</div>
<div class="num">x{{item.num}}</div>
</div>
</div>
</div>
<div class="service-area">
<div class="title">
<img src="../assets/images/order-list/location.png">
服务区域：
</div>
<div class="area-text">
{{info.serviceAreaStr}}
</div>
</div>
<div class="coupon-container" @click="go()">
<div class="coupon-left">
<div class="left-box">
<img src="../assets/images/order-list/coupon.png">
<div class="text">
优惠券：
</div>
<div class="name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</div>
</div>
<div class="price" v-if="info.primeCoupon">-￥{{info.primeCoupon?info.primeCoupon.amount/100:""}}</div>
</div>
<img class="icon" src="../assets/images/order-list/arrow.png">
</div>
<div class="message-container">
<div class="title">
<img src="../assets/images/order-list/edit.png">
留言备注：
</div>
<textarea v-model="info.text" placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
</div>
<div class="pay-container">
<div class="text">支付方式：</div>
<div class="pay">
<img src="../assets/images/order-list/wechat.png">
微信支付
</div>
</div>
<div class="clause">
<div class="true-box" @click="agree=!agree">
<img v-show="agree" src="../assets/images/order-list/true.png">
</div>
<div @click="agree=!agree">
我已阅读并同意
</div>
<a class="tips" href="http://www.yihaojiazheng.cn/mall/web/agreement">
《一号家政服务协议书》
</a>
</div>
<div class="fill"></div>
<div class="button" role="button">
<div class="button-text">
还需支付：
<div class="num">¥{{price}}</div>
</div>
<button :class="{disabled:!agree}" @click="pay()">立即付款</button>
</div>
</div>
<div class="order-check-whole">
<back-header :path="'/mall/web/vgoods/detail/'+goodsNo">
订单确认
</back-header>
<div class="top">
<div class="goods-container">
<img :src="imghost+info.goodsImgUrl">
<div class="goods-main-container">
<div class="name">{{info.goodsName}}</div>
<div class="box">
<div class="box-text">{{info.shortDesc}}</div>
<div class="box-price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
</div>
<div class="tag-box">
<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
<!-- <i class="tag">新人优惠</i> -->
</div>
</div>
</div>
<div class="gift-container" v-if="info.gifts&&info.gifts.length>0">
<div class="gift-item" v-for="item in info.gifts">
<div class="text">【赠品】</div>
<div class="name">{{item.name}}</div>
<div class="num">x{{item.num}}</div>
</div>
</div>
</div>
<div class="service-area">
<div class="title">
<img src="../assets/images/order-list/location.png">
服务区域：
</div>
<div class="area-text">
{{info.serviceAreaStr}}
</div>
</div>
<div class="coupon-container" @click="go()">
<div class="coupon-left">
<div class="left-box">
<img src="../assets/images/order-list/coupon.png">
<div class="text">
优惠券：
</div>
<div class="name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</div>
</div>
<div class="price" v-if="info.primeCoupon">-￥{{info.primeCoupon?info.primeCoupon.amount/100:""}}</div>
</div>
<img class="icon" src="../assets/images/order-list/arrow.png">
</div>
<div class="message-container">
<div class="title">
<img src="../assets/images/order-list/edit.png">
留言备注：
</div>
<textarea v-model="info.text" placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
</div>
<div class="pay-container">
<div class="text">支付方式：</div>
<div class="pay">
<img src="../assets/images/order-list/wechat.png">
微信支付
</div>
</div>
<div class="clause">
<div class="true-box" @click="agree=!agree">
<img v-show="agree" src="../assets/images/order-list/true.png">
</div>
<div @click="agree=!agree">
我已阅读并同意
</div>
<a class="tips" href="http://www.yihaojiazheng.cn/mall/web/agreement">
《一号家政服务协议书》
</a>
</div>
<div class="fill"></div>
<div class="button" role="button">
<div class="button-text">
还需支付：
<div class="num">¥{{price}}</div>
</div>
<button :class="{disabled:!agree}" @click="pay()">立即付款</button>
</div>
</div>
</template>
<script>
import backHeader from "../components/back-header.vue";
@ -103,6 +107,10 @@ export default {
? this.info.primeCoupon.amount
: 0;
return price / 100 - discount / 100;
},
labelList() {
let str = this.info.smallLabel;
return str ? JSON.parse(str) : "";
}
},
methods: {
@ -222,8 +230,8 @@ export default {
let goodsNo = this.getParam("goodsNo");
let couponNo = this.info.primeCoupon
? this.info.primeCoupon.couponNo
: "";
console.log(couponNo)
: "";
console.log(couponNo);
let goodsVersion =
this.getParam("goodsVersion") ||
sessionStorage.getItem("goodsVersion");
@ -333,6 +341,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 0.15rem;
.box-text {
font-size: 0.24rem;
line-height: 1.1;
@ -355,6 +364,33 @@ export default {
color: #333;
}
}
.tag-box {
font-size: 0.2rem;
display: flex;
height: 0.3rem;
overflow: hidden;
.tag {
flex-shrink: 1;
height: 100%;
font-style: normal;
background: #ffe2c7;
padding: 0rem 0.1rem;
line-height: 0.28rem;
color: #ff8a1d;
border-radius: 0.15rem;
// margin-bottom: 0.1rem;
flex-shrink: 1;
overflow: hidden;
display: -webkit-box;
margin-right: 0.1rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-height: 0.3rem;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
}
}
}
}
.gift-container {

188
src/view/order-detail.vue
View File

@ -1,98 +1,98 @@
<template>
<div class="order-detail-whole">
<back-header path="/v2/order-list" style="margin-bottom:0.15rem">
订单详情
</back-header>
<div class="goods-box">
<div class="item-top">
<div class="item-top-left">
<img src="../assets/images/order-list/address.png">
<div class="item-top-address">{{info.merchantName}}</div>
</div>
<div class="item-top-state" :class="'state'+state">{{stateText}}</div>
</div>
<div class="item-main">
<img :src="imghost+info.goodsImgUrl">
<div class="item-main-text">
<div class="name">{{info.goodsName}}</div>
<div class="tips-box">
<div class="tips">
{{info.shortDesc}}
</div>
<div class="price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
</div>
<div class="tag-box">
<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
<!-- <i class="tag">新人优惠</i> -->
</div>
</div>
</div>
<div class="gift-box" v-if="info.gifts&&info.gifts.length>0">
<div class="gift-item" v-for="item in info.gifts">
<div class="text">【赠品】</div>
<div class="name">{{item.name}}</div>
<div class="num">&nbsp;x{{item.num}}</div>
</div>
</div>
</div>
<div class="message">
<div class="message-title">留言备注：</div>
<div class="box" role="text">
{{info.remark}}
</div>
</div>
<div class="time-box">
<div class="time-item">下单时间：
<div class="time">{{info.create}}</div>
</div>
<div class="time-item" v-show="info.payTime">付款时间：
<div class="time">{{info.payTime}}</div>
</div>
</div>
<div class="money-box">
<div class="money-box-top">
<div class="order">
<div class="text">订单金额：</div>
<div class="num">¥{{info.totalPrice?info.totalPrice/100:""}}</div>
</div>
<div class="discount">
<div class="text">
<div class="string">
优惠减免：
</div>
<span class="discount-name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</span>
</div>
<div class="num">¥{{info.couponPrice?info.couponPrice/100:0}}</div>
</div>
</div>
<div class="money-box-bottom" :class="{right:state!==0&&state!==10}">
<div class="button-box" role="button" v-if="state===0" @click="cancel()">
取消订单
</div>
<div class="button-box" role="button" v-if="state===10" @click="go(3)">
申请退款
</div>
<div class="money">
实际支付：
<div class="money-count">¥{{info.payPrice/100}}</div>
</div>
</div>
</div>
<div class="fill"></div>
<div class="button" role="button" v-if="state==30||state==21" @click="go(1)">
重新下单
</div>
<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state===0" @click="pay()">
立即付款
</div>
<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state==10||state==11" @click="go(2)">
预约服务
</div>
<div class="button" role="button" v-if="state==20">
<a href="tel:400-6080100">联系客服</a>
<!-- 联系客服 -->
</div>
</div>
<div class="order-detail-whole">
<back-header path="/v2/order-list" style="margin-bottom:0.15rem">
订单详情
</back-header>
<div class="goods-box">
<div class="item-top">
<div class="item-top-left">
<img src="../assets/images/order-list/address.png">
<div class="item-top-address">{{info.merchantName}}</div>
</div>
<div class="item-top-state" :class="'state'+state">{{stateText}}</div>
</div>
<div class="item-main">
<img :src="imghost+info.goodsImgUrl">
<div class="item-main-text">
<div class="name">{{info.goodsName}}</div>
<div class="tips-box">
<div class="tips">
{{info.shortDesc}}
</div>
<div class="price">¥{{info.totalPrice?info.totalPrice/100:''}}</div>
</div>
<div class="tag-box">
<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
<!-- <i class="tag">新人优惠</i> -->
</div>
</div>
</div>
<div class="gift-box" v-if="info.gifts&&info.gifts.length>0">
<div class="gift-item" v-for="item in info.gifts">
<div class="text">【赠品】</div>
<div class="name">{{item.name}}</div>
<div class="num">&nbsp;x{{item.num}}</div>
</div>
</div>
</div>
<div class="message">
<div class="message-title">留言备注：</div>
<div class="box" role="text">
{{info.remark}}
</div>
</div>
<div class="time-box">
<div class="time-item">下单时间：
<div class="time">{{info.create}}</div>
</div>
<div class="time-item" v-show="info.payTime">付款时间：
<div class="time">{{info.payTime}}</div>
</div>
</div>
<div class="money-box">
<div class="money-box-top">
<div class="order">
<div class="text">订单金额：</div>
<div class="num">¥{{info.totalPrice?info.totalPrice/100:""}}</div>
</div>
<div class="discount">
<div class="text">
<div class="string">
优惠减免：
</div>
<span class="discount-name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</span>
</div>
<div class="num">¥{{info.couponPrice?info.couponPrice/100:0}}</div>
</div>
</div>
<div class="money-box-bottom" :class="{right:state!==0&&state!==10}">
<div class="button-box" role="button" v-if="state===0" @click="cancel()">
取消订单
</div>
<div class="button-box" role="button" v-if="state===10" @click="go(3)">
申请退款
</div>
<div class="money">
实际支付：
<div class="money-count">¥{{info.payPrice/100}}</div>
</div>
</div>
</div>
<div class="fill"></div>
<div class="button" role="button" v-if="state==30||state==21" @click="go(1)">
重新下单
</div>
<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state===0" @click="pay()">
立即付款
</div>
<div class="button" role="button" style="background:#00BA86;color:white;" v-if="state==10||state==11" @click="go(2)">
预约服务
</div>
<div class="button" role="button" v-if="state==20">
<a href="tel:400-6080100">联系客服</a>
<!-- 联系客服 -->
</div>
</div>
</template>
<script>
import backHeader from "../components/back-header.vue";

25
src/view/service-card-list.vue
View File

@ -1,21 +1,22 @@
<template>
<div class="service-card-list-whole">
<div class="item">
<div class="item-top">
<div class="item-top-left">
<div class="no">NO.56253526484759844156</div>
<div class="gift">赠品</div>
</div>
<div class="address"></div>
</div>
</div>
</div>
<div class="service-card-list-whole">
<div class="item">
<div class="item-top">
<div class="item-top-left">
<div class="no">NO.56253526484759844156</div>
<div class="gift">赠品</div>
</div>
<div class="address"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
}
},
methods: {}
};
</script>
<style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save