123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751 |
- <template>
- <view>
- <navbar :scroll="scrollNum" title-color="#ffffff" background="#1b43c4" :iSimmersive="false" :placeholder="true" title="订单详情"></navbar>
-
- <view class="distribution" v-if="isShipping">
- <text @click="onShipping(1)" :class="{active: shippingType == 1}">快递配送</text>
- <text @click="onShipping(2)" :class="{active: shippingType == 2}">到店自提</text>
- </view>
- <view v-if="isShipping" class="distribution-placeholder"></view>
-
- <view class="top" v-if="shippingType == 1">
- <view class="top-map">
- <text class="iconfont"></text>
- </view>
- <view class="address" @click="isAddressStatus = true">
- <view class="info" v-if="address.tel">
- <text v-if="address.name">收件人:{{ address.name }} </text>
- <text v-if="address.tel">手机号:{{ address.tel }}</text>
- </view>
- <view class="info" v-if="!address.tel">
- <text style="position: relative; top: -10rpx;">请选择地址</text>
- </view>
- <view class="address-info" v-if="address.address">{{ address.address }}</view>
- </view>
- <view class="arrow-right">
- <text class="iconfont"></text>
- </view>
- </view>
-
- <view class="top" v-if="shippingType == 2">
- <view class="top-map">
- <text class="iconfont"></text>
- </view>
- <view class="address" @click="isStoreStatus = true">
- <view class="info">
- <text v-if="store.name">门店名称:{{ store.name }}</text>
- </view>
- <view class="info" v-if="!store.tel">
- <text style="position: relative; top: -10rpx;">请选择地址</text>
- </view>
- <view class="address-info">
- <view v-if="store.tel">手机号:{{ store.tel }}</view>
- <view v-if="store.address">{{ store.address }}</view>
- </view>
- </view>
- <view class="arrow-right">
- <text class="iconfont"></text>
- </view>
- </view>
-
- <view class="goods">
- <view class="title">
- <text>共{{orderData.item.length}}件商品</text>
- </view>
- <view class="goods-box">
- <view class="goods-item clear" v-for="(item,index) in orderData.item" :key="index">
- <view class="goods-img">
- <image :src="item.thumb_image"></image>
- </view>
- <view class="goods-info">
- <view class="t">
- <text>{{item.title}}</text>
- <text>¥{{item.sell_price}}</text>
- </view>
- <view class="b">
- <view v-if="item.goods_array">
- <text v-for="(value,j) in item.goods_array" :key="j">
- {{value.name}}:{{value.value}}
- </text>
- </view>
- <text class="goods-nums">× {{item.goods_nums}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
-
- <view class="order">
- <view class="title">
- <text>订单信息</text>
- </view>
- <view class="list clear">
- <view class="list-box clear" @click="isCouponStatus = !isCouponStatus">
- <view>优惠劵:</view>
- <view>{{bonusText}}</view>
- </view>
- <view class="list-box clear">
- <view>商品金额:</view>
- <view>¥{{orderData.real_amount}}</view>
- </view>
- <view class="list-box clear">
- <view>运费金额:</view>
- <view>¥{{orderData.real_freight}}</view>
- </view>
- <view class="list-box clear" v-if="orderData.real_point > 0">
- <view>需要积分:</view>
- <view class="money">{{orderData.real_point}}积分</view>
- </view>
- <view class="list-box clear">
- <view>订单总额:</view>
- <view class="money">¥{{orderData.payable_amount}}</view>
- </view>
- </view>
- </view>
-
- <view class="order">
- <view class="title">
- <text>备注内容</text>
- </view>
- <view class="list clear">
- <view style="padding: 20rpx 25rpx;">
- <textarea @input="onRemarks" placeholder="请输入留言" style="width: 100%; height: 100rpx;"></textarea>
- </view>
- </view>
- </view>
-
-
- <view class="order">
- <view class="title">
- <text>支付方式</text>
- </view>
-
- <view class="payment-box">
- <view
- v-for="(item,index) in providerList"
- :key="index"
- class="payment-item"
- @click="selectPayment(item.id)"
- >
- <view><text class="iconfont pay" :id="item.id" :class="item.class"></text></view>
- <view :class="{activeColor:payment == item.id}">{{item.name}}<text v-if="item.id == 'balance'" style="padding-left: 15rpx; padding-top: 2rpx; font-size: 24rpx;">可用余额: ¥{{orderData.users_price}}元</text></view>
- <view :class="{active:payment == item.id}"><text class="iconfont"></text></view>
- </view>
- </view>
-
- </view>
-
- <coupon-list
- v-model="isCouponStatus"
- :coupons="coupons"
- @coupon-event="onCoupons"
- ></coupon-list>
-
- <address-list
- v-model="isAddressStatus"
- :array="addressList"
- @onAdd="onAdd"
- @address-event="onSelectedAddress"
- >
- </address-list>
-
- <address-list
- v-model="isStoreStatus"
- :array="storeList"
- :add="false"
- tips="暂无自提门店"
- @address-event="onSelectedStore"
- >
- </address-list>
-
- <view class="operation-placeholder"></view>
- <view class="operation">
- <view class="amount">
- <text>合计:</text>
- <text v-if="orderData.order_amount">¥{{orderData.order_amount}}</text>
- <text v-else>¥{{orderData.payable_amount}}</text>
- </view>
- <view class="pay" @click="onOrderSubmit">提交订单</view>
- </view>
-
-
- <loading v-if="isLoading" :color="loadingColor" :text="loadingText" :layer="true"></loading>
- </view>
- </template>
- <script>
- import MallInfo from '@/components/tool/info.vue'
- import loading from '../../components/tool/loading'
- import navbar from "@/components/navbar/navbar";
- import subscribe from "@/common/subscribe";
- import payment from '@/common/payment';
- export default {
- components:{
- MallInfo,loading,navbar
- },
- data() {
- return {
- scrollNum: 0,
- shippingType: 1,
- isShipping: 0,
- storeList: [],
- store:{
- id: "",
- name: "",
- tel: "",
- address: ""
- },
- isLoading: true,
- loadingColor: "rgba(255,255,255,1)",
- loadingText: "正在加载订单中",
- chosenStoreId: '0',
- isStoreStatus: false,
- isCouponStatus: false,
- isAddressStatus: false,
- bonusText: "请选择",
- address:{
- id: "",
- name: "",
- tel: "",
- address: ""
- },
- chosenAddressId: '0',
- bonusId: '0',
- addressList: [],
- orderData: {
- item:{},
- real_amount: 0.00,
- real_freight: 0.00,
- payable_amount: 0.00,
- order_amount: 0.00,
- users_price:0.00,
- real_point: 0,
- users_point: 0,
- type: 0
- },
- remarks: "",
- payment: "wechat",
- coupons: [],
- params:null,
- orderBtnFlag:false,
- providerList: []
- };
- },
- onLoad(options) {
- let type = options.type;
- let id = options.id;
- let params = {
- id: id,type: type
- };
-
- if(this.$utils.in_array(type,["buy","point","second","regiment","special","group"])){
- params.sku_id = options.sku_id;
- params.num = options.num;
- if(options.kid){
- params.kid = options.kid;
- }
- }
-
- params.shipping_type = this.shippingType;
- this.params = params;
-
- payment.getPaymentList().then(res=>{
- this.providerList = res;
- })
-
- subscribe.order();
- },
- onShow() {
- this.$nextTick(()=>{
- let users = this.$storage.getJson("users");
- if(users == null){
- this.$utils.navigateTo('public/login');
- }else{
- this.onLoadOrder();
- }
- });
- },
- onPageScroll(obj){
- this.scrollNum = obj.scrollTop;
- },
- methods: {
- onRemarks(ev){
- this.remarks = ev.detail.value;
- },
- onShipping(type){
- this.shippingType = type;
- this.params.shipping_type = type;
- if(type == 1){
- this.onSelectedAddress(this.address);
- }else{
- this.onSelectedStore(this.store);
- }
- },
- onSelectedStore(value){
- this.isStoreStatus = false;
- this.chosenStoreId = value.id;
- this.params.store_id = this.chosenStoreId;
- this.store = value;
- delete this.params.address_id;
- this.onLoadOrder();
- },
- onSelectedAddress(value){
- this.isAddressStatus = false;
- this.chosenAddressId = value.id;
- this.params.address_id = this.chosenAddressId;
- this.address = value;
- delete this.params.store_id;
- this.onLoadOrder();
- },
- onLoadOrder(){
- this.$http.getCartConfirm(this.params).then((res)=>{
- if(res.status){
- this.orderData = res.data;
- this.isShipping = parseInt(res.data.is_shipping);
- this.storeList = res.data.store;
- this.addressList = res.data.address.list;
-
- // address
- if(res.data.address.default == undefined || res.data.address.default.length <= 0){
- if(res.data.address.list[0] != undefined){
- this.address = res.data.address.list[0];
- this.chosenAddressId = this.address.id;
- }
- }else{
- this.chosenAddressId = res.data.address.default.id;
- this.address = res.data.address.default;
- }
-
- if(this.storeList.length && this.store.id == ""){
- this.store = this.storeList[0];
- this.chosenStoreId = this.store.id;
- }
-
- this.coupons = res.data.bonus;
- if(this.bonusText == '请选择'){
- this.bonusText = res.data.bonus.length <= 0 ? "暂无优惠劵" : res.data.bonus.length + "张可用"
- }
-
- this.isLoading = false;
- }else{
- this.isLoading = false;
- this.$storage.set("order_msg",res.info);
- this.$utils.redirectTo("cart/msg");
- }
- });
- },
- onOrderSubmit(){
- if(this.orderBtnFlag){
- return false;
- }
-
- if(this.orderData.real_point > this.orderData.users_point){
- this.$utils.msg("您的积分不足,不能购买此商品");
- return false;
- }
-
- if(this.shippingType == 2 && this.store.id == ""){
- this.$utils.msg("请先选择自提门店");
- return false;
- }
-
- this.orderBtnFlag = true;
- this.isLoading = true;
- this.loadingColor = 'rgba(255,255,255,0.3)';
- this.loadingText = "正在提交订单中";
-
- let params = {};
- Object.assign(params,{
- id: this.params.id,
- type: this.params.type,
- address_id: this.chosenAddressId,
- store_id: this.chosenStoreId,
- shipping_type: this.shippingType,
- bonus_id: this.bonusId,
- payment: this.payment,
- remarks: this.remarks,
- source: payment.getPaymentType(),
- // #ifdef H5
- url: document.location.href
- // #endif
- },this.params);
-
- this.$http.createOrder(params).then((res)=>{
- this.isLoading = false;
- if(res.status){
- payment.crreateOrder(res.data,true);
- }else{
- this.$utils.msg(res.info);
- }
- this.orderBtnFlag = false;
- }).catch((err)=>{
- this.isLoading = false;
- this.$utils.msg("网络连接错误,请检查网络是否可用");
- this.orderBtnFlag = false;
- });
- },
- onShipping(type){
- this.shippingType = type;
- this.params.shipping_type = type;
- if(type == 1){
- this.onSelectedAddress(this.address);
- }else{
- this.onSelectedStore(this.store);
- }
- },
- selectPayment(value){
- this.payment = value;
- },
- onCoupons(value) {
- this.isCouponStatus = false;
- this.params.bonus_id = value.id;
- this.bonusText = value.value;
- this.bonusId = value.id;
- this.onLoadOrder();
- },
- onSelectedStore(value){
- this.isStoreStatus = false;
- this.chosenStoreId = value.id;
- this.params.store_id = this.chosenStoreId;
- this.store = value;
- delete this.params.address_id;
- this.onLoadOrder();
- },
- onSelectedAddress(value){
- this.isAddressStatus = false;
- this.chosenAddressId = value.id;
- this.params.address_id = this.chosenAddressId;
- this.address = value;
- delete this.params.store_id;
- this.onLoadOrder();
- },
- onAdd() {
- this.$storage.set("ORDER_CONFIRM_SELECT",true);
- this.$utils.navigateTo("ucenter/address_editor");
- }
- }
- }
- </script>
- <style lang="scss">
- .distribution {
- width: 100%;
- height: 90rpx;
- line-height: 90rpx;
- background-color: #fff;
- text {
- display: inline-block; font-size: 30rpx; width: 50%;
- height: 90rpx; line-height: 90rpx; text-align: center;
- &.active { color: #b91922; }
- }
- }
- .distribution-placeholder { width: 100%; height: 12rpx; }
- .money{ color: #fc4141; }
- .van-address-item__edit { display: none; }
- .top{
- background-color: #fff;
- position: relative;
- &:before{
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- height: 4rpx;
- background: -webkit-repeating-linear-gradient(135deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa 45%,transparent 0,transparent 50%);
- background: repeating-linear-gradient(-45deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa 45%,transparent 0,transparent 50%);
- background-size: 160rpx;
- content: '';
- }
- .top-map{
- width: 60rpx;
- height: 60rpx;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- left: 20rpx;
- text {
- font-size: 32rpx;
- }
- }
- .arrow-right{
- width: 60rpx;
- height: 60rpx;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- right: 0px;
- text {
- transform: rotate(180deg); display: inline-block;
- }
- }
- .address{
- font-size: 28rpx;
- width: 85%;
- margin: 0 auto;
- padding: 20rpx 0px;
- padding-left: 40rpx;
- position: relative;
- .info{
- height: 60rpx;
- line-height: 60rpx;
- span:first-child{
- padding-right: 20rpx;
- }
- span:last-child{
- }
- }
- .address-info{
- height: auto !important;
- height: 60rpx;
- min-height: 40rpx;
- line-height: 40rpx;
- }
- }
- }
- .goods{
- background-color: #fff;
- margin-top: 30rpx;
- padding-bottom: 20rpx;
- .title{
- width: 100%;
- margin: 0 auto;
- color: #666;
- font-size: 28rpx;
- height: 80rpx;
- line-height: 80rpx;
- border-bottom: 2rpx solid #eee;
- text {
- padding-left: 20rpx;
- }
- }
- .goods-box{
- padding: 0 32rpx;
- .goods-item {
- padding-top: 20rpx;
- .goods-img {
- width: 154rpx;
- height: 154rpx;
- display: inline-block;
- float: left;
- image{
- width: 100%;
- height: 100%;
- }
- }
- .goods-info {
- display: inline-block;
- width: 72%;
- font-size: 28rpx;
- float: right;
- text{
- font-style: normal;
- }
- .t {
- width: 100%;
- height: 45px;
- text:first-child{
- float: left;
- display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- width: 70%;
- }
- text:last-child{
- width: 30%;
- float: right;
- text-align: right;
- }
- }
- .b{
- width: 100%;
- height: 40px;
- font-size: 13px;
- view{
- float: left;
- color: #999;
- }
- .goods-nums {
- float: right;
- color: #666;
- }
- }
- }
- }
- }
- }
- .order{
- background-color: #fff;
- margin-top: 30rpx;
- padding-bottom: 20rpx;
- .title{
- width: 100%;
- margin: 0 auto;
- color: #666;
- font-size: 30rpx;
- height: 80rpx;
- line-height: 80rpx;
- border-bottom: 1px solid #eee;
- text {
- padding-left: 30rpx;
- }
- }
- .list {
- width: 100%;
- .list-box{
- width: 92%;
- height: auto !important;
- height: 80rpx;
- min-height: 80rpx;
- line-height: 80rpx;
- margin: 0 auto;
- font-size: 26rpx; color: #333;
- border-bottom: 2rpx solid #ebedf0;
- view{ display: inline-block; }
- view:first-child { float: left; }
- view:last-child { float: right; }
- textarea { height: 150rpx; }
- }
- }
- }
- .payment-box{
- .payment-item{
- padding: 20rpx 32rpx;
- border-bottom: 2rpx solid #eee;
- view { display: inline; }
- view:first-child{
- font-size: 28rpx;
- text{
- width: 40rpx;
- height: 40rpx;
- line-height: 40rpx;
- text-align: center;
- border-radius:50%;
- padding: 4rpx;
- }
- }
- view:nth-child(2){
- font-size: 28rpx;
- padding-left: 20rpx;
- i{
- font-size: 24rpx;
- font-style: normal;
- color: #999;
- padding-left: 20rpx;
- }
- }
- view:nth-child(3){
- float: right;
- display: none;
- color: #999;
- }
- view.active{
- display: block;
- }
- view.activeColor{
- color: red;
- }
- }
- #wechat{
- position: relative;
- top: 2rpx;
- width: 40rpx;
- height: 40rpx;
- display: inline-block;
- color: #fff;
- background-color: #41b035;
- }
- #alipay{
- position: relative;
- top: 2rpx;
- width: 40rpx;
- height: 40rpx;
- display: inline-block;
- color: #fff;
- background-color: #1296db;
- }
- #appleiap{
- position: relative;
- top: 2rpx;
- width: 40rpx;
- height: 40rpx;
- display: inline-block;
- color: #333;
- background-color: #fff;
- border: 1px solid #eee;
- }
- #balance{
- position: relative;
- top: 2rpx;
- width: 40rpx;
- height: 40rpx;
- background-repeat: no-repeat;
- background-size: 40rpx 40rpx;
- display: inline-block;
- color: #fff;
- background-color: #fe960f;
- }
- .check {
- position: relative;
- top: 12rpx;
- width: 40rpx;
- height: 40rpx;
- display: inline-block;
- }
- }
- .operation-placeholder{
- width: 100%;
- height: 140rpx;
- line-height: 140rpx;
- }
- .operation{
- width: 100%;
- height: 110rpx;
- line-height: 110rpx;
- text-align: right;
- background-color: #fff;
- position: fixed;
- left: 0;
- bottom: 0;
- border-top: 2rpx solid #eee;
- z-index: 11111;
- .amount{
- float: left;
- padding-top: 0;
- font-size: 28rpx;
- text-align: center;
- background-color: #fff;
- padding: 6rpx 30rpx;
- display: inline;
- margin-right: 20rpx;
- text{
- font-style: normal;
- font-size: 32rpx;
- color: #555;
- }
- text:last-child{
- color: #db1111;
- font-size: 34rpx;
- position: relative;
- top: 2rpx;
- }
- }
- .pay {
- font-size: 28rpx;
- text-align: center;
- border-radius: 30rpx;
- background-color: #fff;
- padding: 16rpx 30rpx;
- display: inline;
- background-color: #1b43c4;
- margin-right: 20rpx;
- color: #fff;
- }
- }
- </style>
|