订单管理

feature/v-xuexi
wangdong 11 months ago
parent 3ee71a7441
commit 8589de786a
  1. 3
      api/store.js
  2. 1
      components/AddressPicker/index.vue
  3. 6
      pages.json
  4. 85
      pages/my/address.vue
  5. 142
      pages/my/bill_detail.vue
  6. 182
      pages/my/edit_address.vue
  7. 106
      pages/my/index.vue
  8. 424
      pages/special/order.vue
  9. 386
      pages/special/order_store_list.vue
  10. 173
      pages/store/applyInvoicing.vue
  11. 179
      pages/store/detail.vue
  12. 34
      pages/store/index.vue
  13. BIN
      static/images/my/edit.png
  14. BIN
      static/images/my/vip.png
  15. BIN
      static/images/special/car.png
  16. BIN
      static/images/special/location.png
  17. BIN
      static/images/store/cart-icon.png
  18. BIN
      static/images/store/share.png
  19. 14
      uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue

@ -10,6 +10,9 @@ export function getGoodsCateList() {
export function getGoodsList(params) {
return http.get("/store/getproductlist", params);
}
export function getRecommendGoodsList(params) {
return http.get("/store/getRecommendProductList", params);
}
export function getIndexData() {
return http.get("/store/index_api");

@ -27,6 +27,7 @@ export default {
async getAddressData() {
try {
const res = await getAddressData();
console.log(res);
this.cityData = res;
} catch (err) {
this.$util.showMsg("获取地址数据失败!");

@ -352,6 +352,12 @@
"style": {
"navigationBarTitleText": "商品列表"
}
},
{
"path": "pages/store/applyInvoicing",
"style": {
"navigationBarTitleText": "申请开票"
}
}
],
"subPackages": [

@ -1,17 +1,17 @@
<template>
<BaseContainer class="address-list">
<NavBar title="地址列表" />
<NavBar title="地址管理" />
<view class="list" v-if="address && address.length">
<view class="list-item" v-for="(item, index) in address" :key="index">
<view class="list-item flex flex-center-x" v-for="(item, index) in address" :key="index">
<view class="head">
<view>联系人{{ item.real_name }} {{ item.phone }}</view>
<view>{{ item.real_name }} {{ item.phone }} <view v-if="item.is_default">默认</view> </view>
<view>
收货地址{{ item.province }}{{ item.city }}{{ item.district
}}{{ item.detail }}
{{ item.province }} {{ item.city }} {{ item.district }}{{ item.detail }}
</view>
</view>
<view class="foot flex flex-center-x">
<image src="@/static/images/my/edit.png" mode="aspectFill" @click="editAddress(item.id)"></image>
<!-- <view class="foot flex flex-center-x">
<view class="label">
<view
class="checked-icon"
@ -31,7 +31,7 @@
<image :src="getImgPath('/wap/first/zsff/images/trash.png')" />删除
</view>
</view>
</view>
</view> -->
</view>
</view>
<image
@ -41,14 +41,13 @@
/>
<view class="footer">
<navigator url="/pages/my/edit_address">
<image :src="getImgPath('/wap/first/zsff/images/add-address.png')" />
<text>添加新地址</text>
<text>添加地址</text>
</navigator>
<!-- #ifdef MP -->
<view v-if="isWechat" @click="getWxAddress">
<!-- <view v-if="isWechat" @click="getWxAddress">
<image :src="getImgPath('/wap/first/zsff/images/weixin.png')" />
<text>导入微信地址</text>
</view>
</view> -->
<!-- #endif -->
</view>
</BaseContainer>
@ -80,6 +79,11 @@ export default {
}
});
},
editAddress(id) {
uni.navigateTo({
url: `/pages/my/edit_address?id=${id}`,
});
},
remove(id) {
uni.showModal({
title: "提示",
@ -155,35 +159,42 @@ page {
transform: translate(-50%, -50%);
}
/* 地址列表 */
.address-list .list {
padding-top: 3rpx;
background: url(@/static/images/address-line.jpg) left top/749rpx 3rpx repeat-x;
}
.address-list .list-item {
padding-right: 30rpx;
padding-left: 30rpx;
padding: 34rpx 42rpx 38rpx 30rpx;
background-color: #ffffff;
margin-top: 12rpx;
&:first-child {
margin-top: 0;
}
width: 690rpx;
margin: 20rpx auto 0 ;
border-radius: 10rpx;
image {
height: 34rpx;
width: 34rpx;
margin-left: auto;
}
}
.address-list .head {
padding-top: 32rpx;
padding-bottom: 32rpx;
width: 410rpx;
font-size: 28rpx;
color: #282828;
color: #666;
}
.address-list .head view:first-child {
.address-list .head>view:first-child {
margin-bottom: 8rpx;
font-weight: bold;
font-size: 30rpx;
color: #282828;
font-size: 34rpx;
color: #333;
display: flex;
align-items: center;
view {
height: 38rpx;
background: #FEE1E1;
font-size: 20rpx;
color: #FF5C6B;
text-align: center;
line-height: 38rpx;
border-radius: 6rpx;
margin-left: 20rpx;
padding: 0 14rpx;
}
}
.address-list .foot {
@ -227,24 +238,20 @@ page {
.address-list .footer {
position: fixed;
bottom: 0;
left: 0;
bottom: 44rpx;
left: 30rpx;
z-index: 9;
display: flex;
width: 690rpx;
align-items: center;
width: 100%;
padding: 15rpx 30rpx;
padding-bottom: calc(15rpx + var(--safe-bottom));
background-color: #ffffff;
}
.address-list .footer navigator {
flex: 1;
height: 76rpx;
border-radius: 38rpx;
background-color: #2a8eff;
background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%);;
vertical-align: middle;
font-size: 30rpx;
line-height: 76rpx;

@ -4,11 +4,22 @@
<NavBar title="账单明细" />
<template v-if="userInfo.uid">
<view class="header">
<view class="cont">
余额
<view class="num">{{ userInfo.now_money }}</view>
</view>
<view class="header-top">
<view class="cont">
账户余额
<view class="num"><text>{{ userInfo.now_money }}</text></view>
</view>
<view class="gold-coin">金币 <text>0</text> </view>
</view>
<view class="header-bottom">
<view class="withdrawal">提现</view>
<text class="bottom-line"></text>
<view class="recharge">
充值
</view>
</view>
</view>
<uni-datetime-picker ref="uniDatetimePicker" type="range-time" :showDateInput="false" @dateChange="dateChange"></uni-datetime-picker>
<view class="main">
<view class="nav-bar">
<view
@ -20,6 +31,7 @@
>
{{ item }}
</view>
<view class="date-select" @click="dateSelect">日期选择<text></text></view>
</view>
<view class="nav-cont">
<view class="section">
@ -50,8 +62,12 @@
<script>
import { getUserInfo } from "@/api/auth";
import { getBillList } from "@/api/user";
import UniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
export default {
components: {
UniDatetimePicker,
},
data() {
return {
navs: ["全部", "支出", "收入"],
@ -82,6 +98,13 @@ export default {
this.userInfo = data;
});
},
dateSelect() {
this.$refs.uniDatetimePicker.show();
console.log(this.$refs.uniDatetimePicker);
},
dateChange() {
console.log(this.$refs.uniDatetimePicker.displayRangeValue);
},
navActives(index) {
this.navActive = index;
this.page = 1;
@ -116,7 +139,9 @@ export default {
</script>
<style scoped lang="scss">
.bill {
background: #f6f6f6;
}
.section {
position: relative;
@ -136,43 +161,122 @@ export default {
}
.bill .header {
height: 220rpx;
padding-left: 60rpx;
background: #539dfd url(@/static/images/bill-bg.png) 535rpx center/120rpx no-repeat;
line-height: 220rpx;
width: 690rpx;
height: 337rpx;
margin: 18rpx auto 40rpx;
padding-top: 56rpx;
background: linear-gradient(156deg, #4795FF 0%, #0F74BB 100%);
border-radius: 30rpx;
.header-top {
display: flex;
align-items: center;
padding: 0 80rpx 0 40rpx;
.gold-coin {
margin-left: auto;
font-size: 34rpx;
color: #fff;
text {
font-size: 50rpx;
margin-left: 15rpx;
}
}
}
.header-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 62rpx;
margin-top: 30rpx;
>view {
width: 211rpx;
height: 69rpx;
border-radius: 35rpx;
border: 2rpx solid #FFFFFF;
background: transparent;
font-size: 34rpx;
color: #fff;
line-height: 69rpx;
text-align: center;
&.recharge {
background: #fff;
color: #333;
}
}
.bottom-line {
width: 1rpx;
height: 56rpx;
background: #E5E5E5;
}
}
}
.bill .header .cont {
display: inline-block;
vertical-align: middle;
font-size: 28rpx;
line-height: 40rpx;
font-size: 34rpx;
line-height: 34rpx;
color: #ffffff;
}
.bill .header .cont .num {
margin-top: 3rpx;
font-size: 50rpx;
line-height: 70rpx;
line-height: 64rpx;
margin-top: 35rpx;
text {
font-size: 64rpx;
}
}
.bill .main .nav-bar {
display: flex;
background-color: #ffffff;
align-items: center;
.date-select {
width: 161rpx;
height: 58rpx;
background: #F3F5F5;
border-radius: 29rpx;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 24rpx;
>text {
width: 0;
height: 0;
border: 10rpx solid;
border-color: #999 transparent transparent transparent;
vertical-align: top;
margin-left: 11rpx;
margin-top: 5rpx;
}
}
}
.bill .main .nav-bar .item {
flex: 1;
height: 86rpx;
font-size: 28rpx;
line-height: 86rpx;
width: 25%;
height: 97rpx;
font-size: 30rpx;
line-height: 97rpx;
text-align: center;
color: #282828;
color: #999;
position: relative;
}
.bill .main .nav-bar .active {
border-bottom: 1px solid #539dfd;
color: #539dfd;
color: #333333;
&:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10rpx;
width: 40rpx;
height: 6rpx;
background: linear-gradient(90deg, #24A9E1, #0F74BB);
border-radius: 3rpx;
}
}
.bill .main .nav-cont {

@ -3,59 +3,65 @@
<BaseContainer class="add-address">
<NavBar :title="title" />
<view class="form">
<view class="section">
<view class="label flex flex-center-x">
<view class="left-prop">姓名</view>
<input v-model="realName" type="text" placeholder="请输入姓名" />
</view>
<view class="label flex flex-center-x">
<view class="left-prop">联系电话</view>
<input v-model="phone" type="tel" maxlength="11" placeholder="请输入联系电话" />
</view>
<view class="label flex flex-center-x" v-if="type">
<view class="left-prop">所在地区</view>
<AddressPicker ref="picker" style="width: 440rpx;" :address="address.district" @change="handleCityChange" />
<image
class="address-icon"
mode="heightFix"
:src="getImgPath('/wap/first/zsff/images/location_fill.png')"
/>
</view>
<view class="label flex flex-center-x" v-else>
<view class="left-prop">所在地区</view>
<input
v-model="area"
disabled
placeholder="请选择"
readonly
@click="showPicker"
/>
<image
class="address-icon"
mode="heightFix"
:src="getImgPath('/wap/first/zsff/images/location_fill.png')"
/>
</view>
<view class="form-box">
<view class="section">
<view class="label flex flex-center-x">
<view class="left-prop">姓名</view>
<input v-model="realName" type="text" placeholder="请输入姓名" placeholder-class="input-placeholder"/>
</view>
<view class="label flex flex-center-x">
<view class="left-prop">联系电话</view>
<input v-model="phone" type="tel" maxlength="11" placeholder="请输入手机号" placeholder-class="input-placeholder" />
</view>
<view class="label flex flex-center-x" v-if="type">
<view class="left-prop">所在地区</view>
<AddressPicker ref="picker" style="width: 440rpx;" :address="address.district" @change="handleCityChange" />
<!-- <image
class="address-icon"
mode="heightFix"
:src="getImgPath('/wap/first/zsff/images/location_fill.png')"
/> -->
<text class="iconfont iconxiangyou" style="color: #CBCBCB"></text>
</view>
<view class="label flex flex-center-x" v-else>
<view class="left-prop">所在地区</view>
<view @click="showPicker" style="flex: 1;">
<input
v-model="area"
disabled
placeholder="请选择"
readonly
style="pointer-events: none;"
placeholder-class="input-placeholder"
/>
</view>
<!-- <image
class="address-icon"
mode="heightFix"
:src="getImgPath('/wap/first/zsff/images/location_fill.png')"
/> -->
<text class="iconfont iconxiangyou" style="color: #CBCBCB"></text>
</view>
<view class="label flex flex-center-x">
<view class="left-prop">详细地址</view>
<input v-model="detail" placeholder="请填写具体地址" />
</view>
</view>
<view class="section">
<view class="label flex flex-center-x">
<view class="checkbox" @click="isDefault = !isDefault">
<image
v-if="isDefault"
:src="getImgPath('/wap/first/zsff/images/checkbox02.png')"
/>
<image v-else :src="getImgPath('/wap/first/zsff/images/checkbox01.png')" />
</view>
设置为默认地址
</view>
</view>
<view class="label flex flex-center-x" style="height: 132rpx;">
<view class="left-prop">详细地址</view>
<textarea
v-model="detail"
placeholder="请输入详细的地址信息,如道路、门牌号、小区、楼栋号、单元室等"
placeholder-class="input-placeholder"
style="height: 100%;padding: 28rpx 0;"
/>
</view>
</view>
<view class="section">
<view class="label flex flex-center-x" style="border-bottom: none;justify-content: space-between;font-size: 28rpx;color:#333;">
设置为默认地址
<switch :checked="isDefault" @change="changeDefault" class="default-switch" />
</view>
</view>
</view>
<view class="btn">
<view class="save-btn flex flex-center" @click="addAddress">立即保存</view>
<view class="save-btn flex flex-center" @click="addAddress">保存地址</view>
</view>
<AddressPicker ref="picker" style="width: 440rpx;" v-if="!type" :address="address.district" @change="handleCityChange" />
</view>
@ -122,6 +128,7 @@ export default {
},
showPicker() {
console.log(this.$refs.picker);
this.$refs.picker.show();
},
getData() {
@ -204,36 +211,68 @@ export default {
this.address.city = ret.itemName2;
this.address.district = ret.itemName3;
},
changeDefault(e) {
console.log(e, this.isDefault);
this.isDefault = e.detail.value;
}
},
};
</script>
<style scoped lang="scss">
.add-address {
background: #f6f6f6;
}
.form-box {
width: 690rpx;
margin: 20rpx auto 0;
border-radius: 10rpx;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.04);
}
/* 添加地址 */
.add-address .section {
background-color: #ffffff;
}
.add-address .section + .section {
margin-top: 23rpx;
padding: 0 32rpx;
}
.add-address .label {
height: 90rpx;
padding-right: 30rpx;
padding-left: 30rpx;
height: 80rpx;
font-size: 30rpx;
position: relative;
border-bottom: 1px solid #eee;
text {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -20rpx;
}
input, textarea {
color: #333;
font-size: 24rpx;
}
.input-placeholder {
color: #999999;
font-size: 24rpx;
}
.iconfont {
font-size: 24rpx;
}
}
.add-address .label + .label {
border-top: 1px solid #eee;
::v-deep .default-switch {
.uni-switch-input {
width: 80rpx;
height: 40rpx;
&:before,
&:after {
width: 36rpx;
height: 36rpx;
}
}
}
.add-address .label .left-prop {
width: 220rpx;
color: #343434;
color: #333;
font-size: 28rpx;
}
.add-address .label .address-icon {
@ -246,11 +285,11 @@ export default {
color: #ccc;
}
.add-address input {
.add-address input,
.add-address textarea {
flex: 1;
font-family: inherit;
font-size: 30rpx;
color: #333;
text-align: right;
}
.add-address .checkbox {
@ -269,8 +308,11 @@ export default {
}
.add-address .btn {
padding: 30rpx;
margin-top: 20rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
width: 690rpx;
bottom: 44rpx;
}
.add-address .save-btn {

@ -3,32 +3,27 @@
<view class="header">
<view class="user-section" data-eventsync="true" @tap="goProfilePage" >
<image mode="aspectFill" class="img" :src="userInfo.avatar" v-if="isLogin" />
<image mode="aspectFill" class="img" :src="getImgPath('/wap/first/zsff/images/avatar_default.jpg')" v-else />
<view class="text-wrap">
<template v-if="isLogin">
<view class="name">{{ userInfo.nickname }}</view>
<view class="info" v-if="userInfo.level == 1 && userInfo.is_permanent != 1">
<image mode="aspectFill" class="icon" :src="getImgPath('/wap/first/zsff/images/user_member1.png')" />
<text class="time">{{ overdue_time }}到期</text>
</view>
<view class="info" v-else-if="userInfo.level == 1 && userInfo.is_permanent == 1">
<image mode="aspectFill" class="icon" :src="getImgPath('/wap/first/zsff/images/user_member1.png')" />
<text class="time">永久会员</text>
</view>
<view class="info" v-else-if="userInfo.level == 0 && userInfo.member_time != 0">
<image mode="aspectFill" class="icon" :src="getImgPath('/wap/first/zsff/images/user_member1.png')" />
<text class="time">会员已过期</text>
</view>
<view class="info" v-else>
<image mode="aspectFill" class="icon" :src="getImgPath('/wap/first/zsff/images/user_member1.png')" />
<text class="time">未开通会员</text>
</view>
</template>
<view class="name" v-else>请登录</view>
</view>
<view class="iconfont iconxiangyou"></view>
</view>
<image mode="aspectFill" class="img" :src="userInfo.avatar" v-if="isLogin" />
<image mode="aspectFill" class="img" :src="getImgPath('/wap/first/zsff/images/avatar_default.jpg')" v-else />
<view class="text-wrap">
<template v-if="isLogin">
<view class="name">{{ userInfo.nickname }}</view>
<view class="info info-vip" v-if="userInfo.level == 0">
<image mode="aspectFill" class="icon" src="@/static/images/my/vip.png" />
<text>vip会员</text>
</view>
<view class="info" v-else>
<text>尚未开通会员</text>
</view>
</template>
<view class="name" v-else>请登录</view>
</view>
<view class="iconfont iconxiangyou"></view>
</view>
<view class="notice header-info">
<image src="@/static/images/notice.png" mode="aspectfill"></image>
<text class="notice-num">6</text>
</view>
</view>
<view class="member-section" @click="memberUrl">
@ -37,12 +32,13 @@
<text>V</text>
</view>
<view>
<view class="member_title">会员可享多项课程特权</view>
<view v-if="!isLogin || userInfo.level == 0" class="member_title">会员可享多项课程特权</view>
<view v-else class="member_title">有效期至{{ overdue_time }}</view>
</view>
<view v-if="isLogin">
<view v-if="userInfo.is_permanent != 1" style="white-space: nowrap;">
<button class="flex flex-center" v-if="userInfo.level == 1 && userInfo.member_time != 0">
续费会员
<view style="white-space: nowrap;">
<button class="flex flex-center" v-if="userInfo.level == 1">
立即查看
</button>
<button class="flex flex-center" v-else>立即激活</button>
</view>
@ -437,13 +433,37 @@
background: #c8e9fb;
}
.user-page .user-section {
position: relative;
display: flex;
align-items: center;
padding: calc(40rpx + var(--safe-top)) 30rpx 36rpx 40rpx;
padding: calc(80rpx + var(--safe-top)) 30rpx 36rpx 40rpx;
/* #ifdef MP-TOUTIAO */
padding: 30rpx 36rpx 40rpx;
/* #endif */
}
.user-page .notice {
position: absolute;
right: 45rpx;
top: 60rpx;
image {
width: 44rpx;
height: 44rpx;
}
.notice-num {
position: absolute;
width: 22rpx;
height: 22rpx;
top: -3rpx;
right: -1rpx;
color: #fff;
font-size: 18rpx;
font-weight: bold;
background: #FE4944;
border-radius: 50%;
line-height: 22rpx;
text-align: center;
}
}
.user-page .user-section .img {
width: 120rpx;
@ -469,13 +489,23 @@
.user-page .user-section .info {
display: inline-block;
height: 36rpx;
height: 50rpx;
padding-right: 14rpx;
padding-left: 14rpx;
border-radius: 18rpx;
border-radius: 25rpx;
margin-top: 15rpx;
background-color: #fff3e1;
line-height: 36rpx;
line-height: 50rpx;
color: #666666;
font-size: 24rpx;
&.info-vip {
background-color: rgba(247, 247, 247, 0.5);
color: #56AEF9;
>image {
width: 48rpx;
height: 39rpx;
margin-right: 6rpx;
}
}
}
.user-page .user-section .icon {
@ -501,13 +531,13 @@
width: 686rpx;
height: 124rpx;
background: linear-gradient(270deg, #151312 0%, #1F2121 100%);
border-radius: 24rpx;
border-radius: 24rpx 24rpx 0 0;
display: flex;
align-items: center;
padding: 25rpx 28rpx 25rpx 30rpx;
padding: 0 28rpx 0 30rpx;
margin: 20rpx 30rpx 0;
margin-top: -20rpx;
height: 112rpx;
}
.user-page .member-section>view {

@ -1,7 +1,7 @@
<template>
<BaseContainer class="order-detail">
<NavBar title="订单详情" />
<template v-if="orderInfo.id">
<NavBar title="订单详情"/>
<view v-if="orderInfo.id" class="detail-box" @click="showOperateBox = false;">
<!-- 退款 -->
<view class="section return" v-if="orderInfo.refund_reason && orderInfo.refund_status === 0">
<view>卖家拒绝退款</view>
@ -18,20 +18,29 @@
<view class="time">{{ orderInfo._status._msg }}</view>
</view>
<view class="section status" v-if="orderInfo.refund_status === 0 && !orderInfo.refund_reason">
<view class="image">
<!-- <view class="image">
<image :src="orderInfo.status_pic" />
</view>
</view> -->
<view class="text">
<view>{{ orderInfo._status._title }}</view>
<view class="time">{{ orderInfo._status._msg }}</view>
</view>
</view>
<view class="section contact">
<view>
<text>{{ orderInfo.real_name }}</text>
<text>{{ orderInfo.user_phone }}</text>
</view>
<view class="address">{{ orderInfo.user_address }}</view>
<view class="express-delivery-info flex">
<image src="@/static/images/special/car.png" mode="aspectFill"></image>
<view class="info-box">
<view class="info-title flex">您的快递已发车 <text class="more"></text> </view>
<view class="info-time">2023-05-25 22:34:23</view>
</view>
</view>
<view class="address-info flex">
<image src="@/static/images/special/location.png" mode="aspectFill"></image>
<view class="info-box">
<view class="info-title flex">{{ orderInfo.real_name }} <text>{{ orderInfo.user_phone }}</text> </view>
<view class="info-time">{{ orderInfo.user_address }}</view>
</view>
</view>
</view>
<view class="section goods">
<view class="goods-bd" v-for="cart of orderInfo.cartInfo" :key="cart.unique">
@ -40,23 +49,21 @@
</view>
<view class="text">
<view class="name">{{ cart.productInfo.store_name }}</view>
<view class="money">
<view class="price">
<text>{{ cart.truePrice }}</text>
</view>
</view>
<view class="money flex flex-center-x">
<view class="price"><text>{{ cart.truePrice }}</text></view>
<view class="num">x{{ cart.cart_num }}</view>
</view>
</view>
<view v-if="orderInfo._status._type === 3">
<!-- <view v-if="orderInfo._status._type === 3">
<view class="num">x{{ cart.cart_num }}</view>
<navigator :url="`/pages/my/order_reply?unique=${cart.unique}`">
评价
</navigator>
</view>
</view> -->
</view>
<view class="goods-ft">
{{ orderInfo.total_num }}件商品总金额
<text>{{ orderInfo.pay_price }}</text>
<view class="goods-ft flex flex-center-x">
<view class="li"> <text> {{ orderInfo.total_num }} </text> 件商品</view>
<view class="sum-money">合计<text><text style="color: #F8473E;font-size: 32rpx;">{{ orderInfo.pay_price }}</text></text></view>
</view>
</view>
<!-- 待收货 -->
@ -72,103 +79,121 @@
快递单号<text id="account">{{ orderInfo.delivery_id }}</text>
</view>
</view>
<button type="button" @click="copyNo" id="copy">复制单号</button>
<button type="button" @click="copyNo(orderInfo.delivery_id)" id="copy">复制单号</button>
</view>
<view class="section list">
<view class="li-item flex">
<view>订单编号</view>
<view>{{ orderInfo.order_id }}</view>
<view class="flex flex-center-x">{{ orderInfo.order_id }} <text @click="copyNo(orderInfo.order_id)">复制</text> </view>
</view>
<view class="li-item flex">
<view>下单时间</view>
<view>创建时间</view>
<view>{{ orderInfo.add_time }}</view>
</view>
<view v-if="orderInfo._status._type > 0" class="li-item flex">
<view>付款时间</view>
<view>{{ orderInfo.add_time }}</view>
</view>
<view v-if="orderInfo._status._type > 0" class="li-item flex">
<view>发货时间</view>
<view>{{ orderInfo.add_time }}</view>
</view>
</view>
<view class="section list">
<view v-if="orderInfo._status._type > 0" class="li-item flex">
<view>支付方式</view>
<view>{{ orderInfo._status._payType }}</view>
</view>
<view class="li-item flex">
<view>商品金额</view>
<view>{{ orderInfo.total_price }}</view>
</view>
<view class="li-item flex">
<view>支付方式</view>
<view>{{ orderInfo._status._payType }}</view>
</view>
<view v-if="orderInfo.total_postage > 0" class="li-item flex">
<view>运费</view>
<view>{{ orderInfo.total_postage }}</view>
</view>
<view v-if="orderInfo.use_gold > 0" class="li-item flex">
<view class="li-item flex">
<view>优惠金额</view>
<view style="color: #FF3A37;">{{ orderInfo.total_price - money }}</view>
</view>
<!-- <view v-if="orderInfo.use_gold > 0" class="li-item flex">
<view>使用{{ gold_name }}</view>
<view>{{ orderInfo.use_gold }}</view>
</view>
<view v-if="orderInfo.back_gold > 0" class="li-item flex">
<view>退还{{ gold_name }}</view>
<view>{{ orderInfo.back_gold }}</view>
</view>
</view> -->
<view class="li-item flex">
<view>配送费</view>
<view>{{ orderInfo.total_postage }}</view>
</view>
<view class="li-item flex">
<view>实付款</view>
<view>{{ orderInfo.pay_price }}</view>
<view>际支</view>
<view>{{ money }}</view>
</view>
<view class="li-item flex">
<!-- <view class="li-item flex">
<view>买家留言</view>
<view class="msg">{{ orderInfo.mark }}</view>
</view>
</view> -->
</view>
<view class="footer">
<view v-if="showOperateBox" class="operate-box">
<view class="apply-invoicing" @click.stop="applyInvoicing">申请开票</view>
<view class="delete-order" @click.stop="removeOrder('删除')">删除订单</view>
</view>
<view class="footer flex flex-center-x">
<view class="more-operate" @click.stop="showOperateBox = !showOperateBox;">更多</view>
<template v-if="orderInfo._status._type === 0">
<view class="blue footer-btn" @click="submit">立即付款</view>
<view class="footer-btn" @click="removeOrder('取消')">取消订单</view>
<view class="red footer-btn" @click="submit">付款</view>
</template>
<template v-else-if="
<!-- <template v-else-if="
orderInfo._status._type === 1 &&
!orderInfo.refund_reason &&
orderInfo.refund_status === 0 &&
orderInfo.pay_price > 0
">
<view class="footer-btn" @click="applyRefundOrder">申请退款</view>
</template>
<template v-else-if="orderInfo._status._type === 2">
<view class="blue footer-btn" @click="userTake">确认收货</view>
</template>
<template v-else-if="
</template> -->
<!-- <template v-else-if="
orderInfo._status._type === 3 &&
!orderInfo.refund_reason &&
orderInfo.refund_status === 0 &&
orderInfo.pay_price > 0
">
<view class="footer-btn" @click="applyRefundOrder">申请退款</view>
<view class="footer-btn" @click="removeOrder('删除')">删除订单</view>
</template>
<template v-else-if="
<view class="footer-btn" @click="applyRefundOrder">申请退款</view>
</template> -->
<!-- <template v-else-if="
orderInfo._status._type === 4 &&
!orderInfo.refund_reason &&
orderInfo.refund_status === 0 &&
orderInfo.pay_price > 0
">
<view class="footer-btn" @click="applyRefundOrder">申请退款</view>
<view class="footer-btn" @click="removeOrder('删除')">删除订单</view>
</template>
<template v-else-if="
<view class="footer-btn" @click="applyRefundOrder">申请退款</view>
</template> -->
<!-- <template v-else-if="
!orderInfo.refund_reason &&
orderInfo.refund_status === 0 &&
orderInfo._status._type === 3 &&
orderInfo.pay_price > 0
">
<view class="blue footer-btn" @click="applyRefundOrder()"> 再次申请 </view>
<view class="footer-btn" @click="removeOrder('删除')">删除订单</view>
</template>
<view class="red footer-btn" @click="applyRefundOrder()"> 再次申请 </view>
</template> -->
<view @click="removeOrder('删除')" class="footer-btn" v-else-if="
orderInfo.refund_status === 2 ||
(orderInfo._status._type === 3 && orderInfo.pay_price === 0)
">删除订单</view>
<view class="footer-btn" @click="services">联系客服</view>
<!-- <view class="footer-btn" @click="services">联系客服</view> -->
<view class="footer-btn" v-if="orderInfo.status >= 1" @click="express">查看物流</view>
<template v-else-if="orderInfo._status._type === 2">
<view class="red footer-btn" @click="userTake">确认收货</view>
</template>
</view>
<!-- 支付弹窗 -->
<PayDialog :open.sync="payDialogOpen" :money="money" :now_money="now_money" :special_id="id"
:pay_type_num="pay_type_num" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
:template-id="templateId" :wxpay-h5="wxpayH5" @change="changeVal" />
</template>
</view>
</BaseContainer>
</template>
@ -198,7 +223,8 @@
wxpayH5: 0,
site_name: "",
gold_name: "",
isOpenWeixing: false
isOpenWeixing: false,
showOperateBox: false,
};
},
computed: {
@ -242,6 +268,7 @@
is_yue: !!is_yue,
wxpayH5: !!wxpayH5,
});
console.log('money', this);
});
},
subscribeTemplate() {
@ -252,9 +279,9 @@
submit() {
this.payDialogOpen = true;
},
copyNo() {
copyNo(num) {
uni.setClipboardData({
data: this.orderInfo.delivery_id,
data: num,
success: () => {
this.$util.showMsg("复制成功");
},
@ -377,11 +404,31 @@
url: "/pages/my/express?uni=" + this.orderId,
});
},
applyInvoicing() {
uni.navigateTo({
url: `/pages/store/applyInvoicing?orderNum=${this.orderInfo.order_id}&money=${this.money}`,
});
this.showOperateBox = false;
},
},
};
</script>
<style scoped lang="scss">
.order-detail {
background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 60%, #F6F8FA 70%, #A1BFFD 100%);
display: flex;
flex-direction: column;
height: 100vh;
padding-bottom: 130rpx;
.nav-box {
background: transparent!important;
}
.detail-box {
flex: 1;
overflow-y: auto;
}
}
.order-detail .section {
background-color: #ffffff;
}
@ -419,9 +466,9 @@
align-items: center;
padding: 32rpx 30rpx;
background-color: #2c8eff;
background-color: transparent;
font-size: 30rpx;
color: #ffffff;
color: #333;
}
.order-detail .section.status .image {
@ -445,19 +492,51 @@
.order-detail .section.status view:first-child {
font-weight: bold;
font-size: 42rpx;
}
.order-detail .section.status .time {
margin-top: 10rpx;
margin-top: 22rpx;
font-size: 24rpx;
line-height: 24rpx;
opacity: 0.8;
}
.order-detail .section.contact {
padding: 40rpx 30rpx;
background: #ffffff url(@/static/images/address-line.jpg) left bottom/749rpx 3rpx repeat-x;
font-size: 30rpx;
color: #282828;
padding: 40rpx 16rpx;
font-size: 32rpx;
line-height: 32rpx;
color: #333;
width: 690rpx;
margin: 0 auto;
background: #fff;
border-radius: 10rpx;
.express-delivery-info, .address-info {
margin-bottom: 60rpx;
image {
width: 44rpx;
height: 44rpx;
margin-right: 16rpx;
}
.info-box {
flex: 1;
.info-title {
align-items: center;
padding-right: 20rpx;
text {
margin-left: auto;
}
}
.info-time {
margin-top: 24rpx;
color: #999;
font-size: 24rpx;
}
}
}
.address-info .info-box .info-title text {
margin-left: 40rpx!important;
}
}
.order-detail .section.contact text text {
@ -469,71 +548,50 @@
font-size: 26rpx;
color: #868686;
}
.order-detail .section.goods {
width: 690rpx;
margin: 20rpx auto 0;
padding: 40rpx 30rpx 0;
}
.order-detail .section.goods .goods-bd {
display: flex;
padding: 26rpx 30rpx;
}
.order-detail .section.goods .image {
width: 230rpx;
height: 128rpx;
border-radius: 10rpx;
overflow: hidden;
margin-right: 20rpx;
}
.order-detail .section.goods image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.order-detail .section.goods .text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.order-detail .section.goods .name {
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 28rpx;
line-height: 40rpx;
color: #343434;
}
.order-detail .section.goods .price,
.order-detail .section.goods .vip-price {
display: inline-block;
}
.order-detail .section.goods .price {
font-size: 26rpx;
color: #9a9a9a;
}
.order-detail .section.goods .price text {
font-size: 26rpx;
}
.order-detail .section.goods .vip-price {
font-size: 24rpx;
}
.order-detail .section.goods .vip-price image {
display: inline-block;
width: 46rpx;
height: 21rpx;
pointer-events: none;
-webkit-touch-callout: none;
border-bottom: 1rpx solid rgba(187, 187, 187, 0.32);
padding-bottom: 33rpx;
.image {
width: 156rpx;
height: 184rpx;
margin-right: 52rpx;
image {
display: block;
width: 100%;
height: 100%;
}
}
.text {
flex: 1;
.name {
color: #333;
line-height: 35rpx;
height: 70rpx;
}
.money {
margin-top: auto;
.price {
font-size: 22rpx;
color: #F8473E;
text {
font-size: 32rpx;
}
}
.num {
margin-left: auto;
font-size: 24rpx;
color: #999;
}
}
}
}
.order-detail .section.goods .goods-bd>view:last-child {
@ -561,21 +619,24 @@
}
.order-detail .section.goods .goods-ft {
display: flex;
justify-content: flex-end;
align-items: center;
height: 93rpx;
padding-right: 30rpx;
padding-left: 30rpx;
border-top: 1px solid #f0f0f0;
font-size: 26rpx;
color: #282828;
}
.order-detail .section.goods .goods-ft text {
font-weight: bold;
font-size: 28rpx;
color: #ff6b00;
justify-content: space-between;
height: 92rpx;
.li {
font-size: 25rpx;
color: #999;
text {
color: #333;
margin: 0 5rpx;
}
}
.sum-money {
font-size: 25rpx;
color: #999;
>text {
color: #F8473E;
font-size: 22rpx;
}
}
}
.order-detail .section.express {
@ -583,6 +644,8 @@
align-items: center;
padding: 30rpx;
width: 690rpx;
margin: 20rpx auto 0;
}
.order-detail .section.express .image {
@ -633,16 +696,31 @@
padding: 30rpx;
font-size: 28rpx;
color: #282828;
width: 690rpx;
margin: 20rpx auto 0;
}
.order-detail .section.list .li-item {
&+.li-item {
margin-top: 30rpx;
}
text {
width: 90rpx;
height: 42rpx;
background: #FFFFFF;
border-radius: 21rpx;
border: 2rpx solid #BBBBBB;
text-align: center;
line-height: 42rpx;
margin-left: auto;
font-size: 24rpx;
color: #bbb;
}
view:nth-child(1) {
width: 180rpx;
}
view:nth-child(2) {
flex: 1;
text-align: right;
color: #868686;
}
}
@ -657,43 +735,73 @@
text-align: left;
word-break: break-all;
}
.order-detail .operate-box {
position: fixed;
left: 60rpx;
bottom: 110rpx;
background: #fff;
box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(49,49,49,0.16);
padding: 0 16rpx;
z-index: 100;
&:after {
content: '';
position: absolute;
left: 10rpx;
bottom: -35rpx;
width: 0;
height: 0;
border: 20rpx solid;
border-color: #fff transparent transparent transparent;
}
>view {
font-size: 28rpx;
color: #333;
height: 84rpx;
line-height: 84rpx;
&.apply-invoicing {
border-bottom: 1rpx solid #e5e5e5;
}
}
}
.order-detail .footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 9;
width: 100%;
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + var(--safe-bottom));
padding: 0 30rpx 0 60rpx;
height: 130rpx;
background-color: #ffffff;
overflow: hidden;
white-space: nowrap;
text-align: right;
.more-operate {
margin-right: auto;
font-size: 28rpx;
color: #666;
}
}
.order-detail .footer {
.footer-btn {
display: inline-block;
width: 150rpx;
width: 160rpx;
height: 60rpx;
border: 1px solid #dedede;
border: 1px solid #CCCCCC;
border-radius: 30rpx;
vertical-align: middle;
font-size: 27rpx;
font-size: 28rpx;
line-height: 60rpx;
text-align: center;
color: #aaa;
color: #666;
&.blue {
border-color: #2c8eff;
background-color: #2c8eff;
&.red {
border-color: #FF4B33;
background-color: #FF4B33;
color: #ffffff;
}
}
}
.footer-btn+.footer-btn {
margin-left: 15rpx;
margin-left: 8rpx;
}
</style>

@ -1,81 +1,93 @@
<template>
<BaseContainer class="order-list" :fixedNav="false">
<NavBarTitle title="我的订单" :height="200" />
<view class="header">
<view class="conts">
<view class="taber">
<view class="li">{{ orderData.sum }}</view>
<view class="ul">累计订单</view>
</view>
<view class="taber">
<text class="li">{{ orderData.sumPrice }}</text>
<text class="ul">总消费</text>
</view>
</view>
<view class="menu">
<view class="menu-item pos flex-auto" :class="{ on: type == item.type }" v-for="item of typeList"
:key="item.type" @click="changeType(item.type)">
<view>{{ item.label }}
<BaseContainer class="order-list" :fixedNav="false" style="background: #f6f6f6;">
<view style="width: 100%;min-height: 100vh;" @click="hideOperate">
<NavBarTitle title="我的订单" :height="88" style="background: #fff;"/>
<view class="header">
<!-- <view class="conts">
<view class="taber">
<view class="li">{{ orderData.sum }}</view>
<view class="ul">累计订单</view>
</view>
<view class="taber">
<text class="li">{{ orderData.sumPrice }}</text>
<text class="ul">总消费</text>
</view>
</view> -->
<view class="menu">
<view class="menu-item pos flex-auto" :class="{ on: type == item.type }" v-for="item of typeList"
:key="item.type" @click="changeType(item.type)">
<view>{{ item.label }}
<view class="right" v-if="orderData[item.dataKey]">{{ orderData[item.dataKey] }}</view>
</view>
<!-- <view class="right" v-if="orderData[item.dataKey]">{{ orderData[item.dataKey] }}</view> -->
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="main">
<view v-if="orderList.list && orderList.list.length" class="list">
<view class="order-item" v-for="item in orderList.list" :key="item.order_id">
<view class="head">
<view>订单号{{ item.order_id }}</view>
<view v-text="item._status._title"></view>
</view>
<view class="cont">
<view class="goods-group">
<view class="goods" v-for="cart in item.cartInfo">
<view class="image">
<image :src="cart.productInfo.image" mode="aspectFill" />
</view>
<view class="text">
<view class="name" v-text="cart.productInfo.store_name"></view>
<view class="money">
<view class="price">{{ cart.truePrice }}</view>
</view>
</view>
<view class="num">x{{ cart.cart_num }}</view>
</view>
<view class="sum">
<span class="li">{{ item.total_num }}件商品</span>总金额 <text>{{ item.pay_price }}</text>
</view>
</view>
<view class="button-group">
<button v-if="item._status._type === 0" type="button" class="flex flex-center"
@click="orderPayment(item)">
立即付款
</button>
<button v-else-if="item._status._type === 2" type="button" class="flex flex-center"
@click="userTake(item)">
确认收货
</button>
<navigator v-else-if="item._status._type === 3" class="flex flex-center"
:url="`/pages/my/order_reply?unique=${getCartId(item.cartInfo)}`">
评价晒单
</navigator>
<navigator class="flex flex-center" :url="`/pages/special/order?uni=${item.order_id}`">
查看详情
</navigator>
</view>
</view>
</view>
</view>
<image v-else-if="orderList.loaded" class="nothing" mode="aspectFit"
:src="getImgPath('/wap/first/zsff/images/no_order.png')" />
</view>
<PayDialog v-if="initDataLoading" :open.sync="payDialogOpen" :money="Number(money)" :now_money="now_money"
:pay_type_num="pay_type_num" :special_id="id" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
:template-id="templateId" :wxpay-h5="wxpayH5" @change="changeVal" />
<view class="main">
<view v-if="orderList.list && orderList.list.length" class="list">
<view class="order-item" v-for="item in orderList.list" :key="item.order_id">
<view class="head">
<view>订单编号{{ item.order_id }}</view>
<view v-text="item._status._title"></view>
</view>
<view class="cont">
<view class="goods-group">
<view class="goods" v-for="cart in item.cartInfo">
<view class="image">
<image :src="cart.productInfo.image" mode="aspectFill" />
</view>
<view class="text flex flex-column">
<view class="name" v-text="cart.productInfo.store_name"></view>
<view class="money flex flex-center-x">
<view class="price"><text>{{ cart.truePrice }}</text></view>
<view class="num">x{{ cart.cart_num }}</view>
</view>
</view>
</view>
</view>
<view class="sum flex flex-center-x">
<view class="li"> <text> {{ item.total_num }} </text> 件商品</view>
<view class="sum-money">合计<text><text style="color: #F8473E;font-size: 32rpx;">{{ item.pay_price }}</text></text></view>
</view>
<view v-if="operateId === item.order_id" class="operate-box">
<view class="apply-invoicing" @click.stop="applyInvoicing(item.order_id, item.pay_price)">申请开票</view>
<view class="delete-order" @click.stop="removeOrder('删除', item.order_id)">删除订单</view>
</view>
<view class="button-group">
<view class="more-operate" @click.stop="showMoreOperate(item.order_id)">更多</view>
<navigator v-if="item._status._type !== 0" class="flex flex-center btn-left" :url="`/pages/special/order?uni=${item.order_id}`">
查看物流
</navigator>
<button v-if="item._status._type === 0" type="button" class="flex flex-center btn-left"
@click="removeOrder('取消', item.order_id)">
取消订单
</button>
<navigator v-else-if="item._status._type === 3" class="flex flex-center"
:url="`/pages/my/order_reply?unique=${getCartId(item.cartInfo)}`">
评价
</navigator>
<button v-if="item._status._type === 0" type="button" class="flex flex-center btn-right"
@click="orderPayment(item)">
去付款
</button>
<button v-else-if="item._status._type === 1 || item._status._type === 2" type="button" class="flex flex-center btn-right"
@click="userTake(item)">
确认收货
</button>
</view>
</view>
</view>
</view>
<image v-else-if="orderList.loaded" class="nothing" mode="aspectFit"
:src="getImgPath('/wap/first/zsff/images/no_order.png')" />
</view>
<PayDialog v-if="initDataLoading" :open.sync="payDialogOpen" :money="Number(money)" :now_money="now_money"
:pay_type_num="pay_type_num" :special_id="id" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
:template-id="templateId" :wxpay-h5="wxpayH5" @change="changeVal" />
</view>
</BaseContainer>
</template>
@ -93,7 +105,7 @@
typeList: [
{
type: 9,
label: "全部",
label: "全部订单",
dataKey: "sum",
},
{
@ -101,11 +113,11 @@
label: "待付款",
dataKey: "noBuy",
},
{
type: 1,
label: "待发货",
dataKey: "noDelivered",
},
// {
// type: 1,
// label: "",
// dataKey: "noDelivered",
// },
{
type: 2,
label: "待收货",
@ -116,11 +128,11 @@
label: "待评价",
dataKey: "noReply",
},
{
type: 4,
label: "退款",
dataKey: "refund",
},
// {
// type: 4,
// label: "退",
// dataKey: "refund",
// },
],
type: 9,
@ -155,7 +167,8 @@
templateId: "",
wxpayH5: false,
initDataLoading: false,
isOpenWeixing: false
isOpenWeixing: false,
operateId: '',
};
},
watch: {
@ -342,6 +355,35 @@
if (this.loading) return;
this.type = type;
},
showMoreOperate(id) {
this.operateId = this.operateId === id ? '' : id;
},
applyInvoicing(orderNum, money) {
// console.log('');
uni.navigateTo({
url: `/pages/store/applyInvoicing?orderNum=${orderNum}&money=${money}`,
});
},
async removeOrder(title, id) {
const { confirm } = await this.$util.wrapFn(uni.showModal, {
title: "提示",
content: "确认" + title + "该订单?",
});
if (!confirm) return;
uni.showLoading({ mask: true });
try {
await userRemoveOrder(this.id);
uni.hideLoading();
this.$util.showMsg(title + "成功!");
} catch (err) {
uni.hideLoading();
this.$util.showMsg(err.msg);
}
},
hideOperate() {
this.operateId = '';
},
},
};
</script>
@ -355,19 +397,32 @@
left: 0;
right: 0;
margin: 0 auto;
width: 695rpx;
height: 160rpx;
width: 100%;
height: 88rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 0 0;
position: fixed;
margin-top: calc(100rpx + var(--safe-top));
margin-top: calc(88rpx + var(--safe-top));
z-index: 100;
.menu {
margin-top: 20rpx;
background: #F7F8F9;
}
.menu {
border-radius: 0rpx;
.menu-item {
padding-top: 0;
line-height: 88rpx;
color: #999999;
font-size: 30rpx;
&.on {
color: #333333;
font-weight: normal;
:after {
background: linear-gradient(90deg, #24A9E1, #0F74BB);
border-radius: 3rpx;
width: 40rpx;
height: 6rpx;
}
}
}
}
.col-12 {
height: 20rpx;
background: #F7F8F9;
@ -405,8 +460,149 @@
.main {
position: absolute;
margin-top: calc(350rpx + var(--safe-top));
margin-top: calc(176rpx + var(--safe-top));
width: 100%;
.list {
.order-item {
padding: 30rpx;
.head {
padding: 0;
>view {
&:first-child {
color: #999;
font-size: 28rpx;
}
&:last-child {
color: #FF2825;
font-size: 26rpx;
}
}
}
.cont {
padding-left: 0;
margin-top: 76rpx;
position: relative;
.goods-group {
padding: 0 0 33rpx 0;
border-bottom: 1rpx solid #bbb;
.goods {
padding-left: 12rpx;
.image {
width: 156rpx;
height: 184rpx;
margin-right: 52rpx;
}
.text {
.name {
color: #333;
line-height: 35rpx;
height: 70rpx;
}
.money {
margin-top: auto;
.price {
font-size: 22rpx;
color: #F8473E;
text {
font-size: 32rpx;
}
}
.num {
margin-left: auto;
font-size: 24rpx;
color: #999;
}
}
}
}
}
.sum {
justify-content: space-between;
.li {
font-size: 25rpx;
color: #999;
text {
color: #333;
margin: 0 5rpx;
}
}
.sum-money {
font-size: 25rpx;
color: #999;
>text {
color: #F8473E;
font-size: 22rpx;
}
}
}
.operate-box {
position: absolute;
left: 10rpx;
bottom: 80rpx;
background: #fff;
box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(49,49,49,0.16);
padding: 0 16rpx;
z-index: 100;
&:after {
content: '';
position: absolute;
left: 10rpx;
bottom: -35rpx;
width: 0;
height: 0;
border: 20rpx solid;
border-color: #fff transparent transparent transparent;
}
>view {
font-size: 28rpx;
color: #333;
height: 84rpx;
line-height: 84rpx;
&.apply-invoicing {
border-bottom: 1rpx solid #e5e5e5;
}
}
}
.button-group {
border-top: none;
height: 60rpx;
margin-top: 50rpx;
padding: 0;
.more-operate {
margin-right: auto;
font-size: 28rpx;
color: #666;
}
.uni-navigator, .btn-left {
flex-shrink: 0;
width: 160rpx;
height: 60rpx;
border: 1px solid #CCCCCC;
border-radius: 30rpx;
background-color: #fff;
font-family: inherit;
font-weight: normal;
font-size: 28rpx;
color: #666;
margin-left: 10rpx;
}
.uni-button, .btn-right {
flex-shrink: 0;
width: 160rpx;
height: 60rpx;
border-radius: 30rpx;
background-color: #FF4B33;
font-family: inherit;
font-weight: normal;
font-size: 28rpx;
color: #fff;
margin-left: 10rpx;
}
}
}
}
}
}
.nothing {

@ -0,0 +1,173 @@
<template>
<BaseContainer class="apply-invoicing">
<NavBar title="申请开票" />
<view class="order-info info-box">
<view class="info-item flex flex-center-x">
<view class="item-label">订单编号</view>
<view class="item-content">{{ orderNum }}</view>
</view>
<view class="info-item flex flex-center-x">
<view class="item-label">开票金额</view>
<view class="item-content money-content"><text>{{ money }}</text></view>
</view>
</view>
<view class="invoicing-info info-box">
<view class="info-item flex flex-center-x">
<view class="item-label">抬头类型</view>
<view class="item-content">
<radio-group @change="changeRadioType">
<label>
<radio value="个人" :checked="invoicingInfo.type === '个人'" color="#F8473E"/><text>个人</text>
</label>
<label>
<radio value="企业" :checked="invoicingInfo.type === '企业'" color="#F8473E"/><text>企业</text>
</label>
</radio-group>
</view>
</view>
<view class="info-item flex flex-center-x">
<view class="item-label">发票抬头</view>
<view class="item-content">
<input type="text" :value="invoicingInfo.invoiceHeader" placeholder="抬头名称" placeholder-class="input-placeholder" />
</view>
</view>
<template v-if="invoicingInfo.type === '企业'">
<view class="info-item flex flex-center-x">
<view class="item-label">税号</view>
<view class="item-content">
<input type="text" :value="invoicingInfo.dutyParagraph" placeholder="纳税人识别号或社会统一征信代码" placeholder-class="input-placeholder" />
</view>
</view>
<view class="info-item flex flex-center-x">
<view class="item-label">地址</view>
<view class="item-content">
<input type="text" :value="invoicingInfo.address" placeholder="选填" placeholder-class="input-placeholder" />
</view>
</view>
<view class="info-item flex flex-center-x">
<view class="item-label">开户行</view>
<view class="item-content">
<input type="text" :value="invoicingInfo.bank" placeholder="选填" placeholder-class="input-placeholder" />
</view>
</view>
</template>
</view>
<view class="footer">
<view class="submit-btn btn" @click="submit">提交申请</view>
<view class="cancel-btn btn" @click="cancel">不开发票</view>
</view>
</BaseContainer>
</template>
<script>
export default {
data() {
return {
orderNum: '',
money: '',
invoicingInfo: {
type: '个人',
invoiceHeader: '',
dutyParagraph: '',
address: '',
bank: '',
},
};
},
onLoad(options) {
console.log(options);
this.orderNum = options.orderNum || '';
this.money = options.money || 0;
},
methods: {
changeRadioType(e) {
console.log(e, this.invoicingInfo.type);
this.invoicingInfo.type = e.detail.value;
},
submit() {
},
cancel() {
uni.navigateBack();
},
},
};
</script>
<style lang="scss" scoped>
.input-placeholder {
color: #CFCFCF;
font-size: 24rpx;
}
.apply-invoicing {
background: #f5f5f5;
.info-box {
width: 690rpx;
margin: 20rpx auto 0;
background: #fff;
border-radius: 10rpx;
padding: 20rpx 40rpx;
.info-item {
height: 64rpx;
line-height: 64rpx;
color: #999999;
font-size: 26rpx;
.item-label {
width: 130rpx;
margin-right: 40rpx;
}
.item-content {
flex: 1;
color: #000;
&.money-content {
color: #F8473E;
font-size: 22rpx;
text {
font-size: 32rpx;
}
}
::v-deep {
uni-radio-group, {
display: flex;
align-items: center;
justify-content: flex-end;
.uni-radio-input {
width: 34rpx;
height: 34rpx;
}
}
.uni-label-pointer {
display: flex;
align-items: center;
margin-left: 63rpx;
}
input {
text-align: right;
}
}
}
}
}
.footer {
position: fixed;
left: 30rpx;
width: 690rpx;
bottom: 173rpx;
.btn {
width: 100%;
height: 80rpx;
background: #E5E5E5;
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
color: #A2A2A2;
font-size: 32rpx;
&.submit-btn {
background: #F8473E;
color: #fff;
margin-bottom: 40rpx;
}
}
}
}
</style>

@ -1,11 +1,6 @@
<template>
<BaseContainer class="goods-detail">
<NavBar title="商品详情">
<template>
<view class="share" @click="handleCreateSharePoster">
<i class="iconfont iconfenxiang"></i>
</view>
</template>
</NavBar>
<template v-if="storeInfo.id">
<view class="first">
@ -19,12 +14,25 @@
<view class="now">
<text>{{ storeInfo.price }}</text>
</view>
<view class="vip"><span style="font-size:16rpx;">VIP</span> {{ storeInfo.vip_price }}</view>
<view class="origin">原价 {{ storeInfo.vip_price }}</view>
</view>
<view class="share-icon" @click="handleCreateSharePoster">
<view class="iconfont">
<image src="@/static/images/store/share.png"></image>
</view>
<view>分享</view>
</view>
<view class="collect-icon" @click="collect">
<view :class="[
'iconfont',
storeInfo.collect ? 'iconshoucang2' : 'iconshoucang11',
]"></view>
<view>{{ storeInfo.collect ? "已收藏" : "收藏" }}</view>
</view>
<view class="title">{{ storeInfo.store_name }}</view>
<view class="other">
<view>库存:{{ storeInfo.stock }}</view>
<view>销量:{{ storeInfo.sales }}</view>
<view>销量 {{ storeInfo.sales }}</view>
<view>库存 {{ storeInfo.stock }}</view>
</view>
</view>
</view>
@ -100,13 +108,18 @@
<view class="group flex">
<view class="btn flex flex-center-y flex-column" @click="goPage(1)">
<image :src="getImgPath('/wap/first/zsff/images/home.png')" />
<view>首页</view>
<view class="btn-name">首页</view>
</view>
<view class="btn flex flex-center-y flex-column" @click="goPage(2)">
<image :src="getImgPath('/wap/first/zsff/images/chat.png')" />
<view>客服</view>
<view class="btn-name">客服</view>
</view>
<view class="btn flex flex-center-y flex-column" @click="goPage(3)">
<image src="@/static/images/store/cart-icon.png" />
<view class="btn-name">购物车</view>
</view>
</view>
<view class="submit-btn flex flex-center" @click="joinCart">加入购物车</view>
<view class="submit-btn flex flex-center" @click="goBuy">立即购买</view>
</view>
@ -261,6 +274,9 @@ export default {
}
}, true);
},
joinCart() {
this.$util.checkLogin();
},
//
changeVal(opt) {
if (typeof opt != "object") opt = {};
@ -360,12 +376,33 @@ export default {
this.lecturer = data;
});
},
//
collect() {
this.$util.checkLogin(() => {
// collectSpecial(this.id)
// .then(() => {
// this.storeInfo.collect = !this.storeInfo.collect;
// this.$util.showMsg(
// this.storeInfo.collect ? "" : ""
// );
// })
// .catch((err) => {
// console.log(err);
// });
}, true);
},
},
};
</script>
<style scoped lang="scss">
/* 商品详情 */
.goods-detail {
background: #f6f6f6;
}
.goods-detail .swiper-container {
background: #fff;
}
.goods-detail .swiper-container image {
display: block;
width: 100%;
@ -374,51 +411,73 @@ export default {
}
.goods-detail .first .detail {
padding: 20rpx 30rpx 38rpx;
padding: 40rpx 28rpx 40rpx 30rpx;
width: 690rpx;
margin: 20rpx auto 0;
background: #fff;
position: relative;
.share-icon, .collect-icon {
position: absolute;
top: 43rpx;
right: 28rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-size: 20rpx;
line-height: 20rpx;
height: 70rpx;
color: #666;
.iconfont.iconshoucang2 {
color: #ff6b00 !important;
}
.iconfont {
font-size: 44rpx;
line-height: 44rpx;
image {
width: 44rpx;
height: 44rpx;
}
}
}
.share-icon {
right: 96rpx;
}
}
.goods-detail .first .price {
font-size: 0;
}
.goods-detail .first .now,
.goods-detail .first .vip {
display: inline-block;
}
.goods-detail .first .now {
font-weight: bold;
font-size: 24rpx;
line-height: 56rpx;
font-size: 22rpx;
line-height: 25rpx;
color: #ff6b00;
}
.goods-detail .first .now text {
font-size: 40rpx;
font-size: 32rpx;
}
.goods-detail .first .vip {
font-size: 28rpx;
line-height: 60rpx;
color: #7D4300;
width: 190rpx;
height: 60rpx;
background: linear-gradient(270deg, #FDC76A 0%, #FBD798 100%);
border-radius: 34rpx;
text-align: center;
.goods-detail .first .origin {
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
font-weight: 600;
margin: 0 0 0 16rpx;
margin: 18rpx 0 0 0;
text-decoration: line-through;
}
.goods-detail .first .title {
margin-top: 15rpx;
margin-top: 34rpx;
color: #333333;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #23272E;
line-height: 52rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #0A1547;
line-height: 40rpx;
}
.goods-detail .first .other {
@ -427,8 +486,10 @@ line-height: 52rpx;
font-size: 24rpx;
line-height: 33rpx;
text-align: center;
color: #AAB0B8;
justify-content: space-between;
color: #999;
>view:last-child {
margin-left: 40rpx;
}
}
.goods-detail .third {
@ -441,40 +502,46 @@ line-height: 52rpx;
display: flex;
align-items: center;
padding-right: 30rpx;
padding-bottom: var(--safe-bottom);
padding-right: 25rpx;
height: 130rpx;
border-top: 1px solid #eeeeee;
background-color: #ffffff;
}
.goods-detail .third .group {
padding: 0 22rpx;
}
.goods-detail .third .group .btn {
height: 100rpx;
padding: 0 28rpx;
font-size: 18rpx;
margin-left: 40rpx;
font-size: 24rpx;
line-height: 24rpx;
color: #333333;
color: #666;
display: flex;
flex-direction: column;
align-items: center;
.btn-name {
margin-top: 14rpx;
}
}
.goods-detail .third .group image {
width: 40rpx;
height: 40rpx;
margin-bottom: 5rpx;
width: 44rpx;
height: 44rpx;
vertical-align: middle;
}
.goods-detail .third .submit-btn {
flex: 1;
font-size: 28rpx;
width: 190rpx;
font-size: 30rpx;
color: #ffffff;
font-weight: 600;
width: 494rpx;
height: 85rpx;
height: 80rpx;
line-height: 80rpx;
background: #1D8DFF;
border-radius: 48rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, #FFA800 0%, #FF9C00 100%);
margin-left: auto;
&:last-child {
background: linear-gradient(90deg, #FF6C00 0%, #FF3C00 100%);
margin-left: 11rpx;
}
}
.goods-detail .second {

@ -71,7 +71,7 @@
</template>
<script>
import { getGoodsCateList, getGoodsList, getIndexData } from "@/api/store";
import { getGoodsCateList, getGoodsList, getRecommendGoodsList, getIndexData } from "@/api/store";
import RecommendPoster from "@/components/RecommendPoster/index.vue";
export default {
@ -129,11 +129,12 @@ import RecommendPoster from "@/components/RecommendPoster/index.vue";
this.menutop = 10;
/* #endif */
this.getGoodsCateList();
this.getGoodsList();
// this.getGoodsList();
this.getRecommendGoodsList();
this.getIndexData();
},
onReachBottom() {
this.getGoodsList();
// this.getGoodsList();
},
onPageScroll({ scrollTop }) {
this.handlePageScroll(scrollTop);
@ -147,6 +148,11 @@ import RecommendPoster from "@/components/RecommendPoster/index.vue";
mounted() {
},
methods: {
getsearch() {
uni.navigateTo({
url:'/pages/store/goodsList'
})
},
handlePageScroll(scrollTop) {
this.tabBarFixed = scrollTop + this.statusBarHeight >= this.tabBarTopSize;
},
@ -189,6 +195,24 @@ import RecommendPoster from "@/components/RecommendPoster/index.vue";
]);
} catch (err) { }
},
async getRecommendGoodsList() {
// if (this.loading || this.finished) {
// return;
// }
this.loadTitle = "";
this.loading = true;
try {
const { data } = await getRecommendGoodsList({});
console.log('recommendGoodsList', data);
this.goodsList = data;
console.log(this.goodsList);
} catch (err) {
console.log(err);
}
this.loading = false;
},
//
async getGoodsList() {
if (this.loading || this.finished) {
@ -547,6 +571,7 @@ page{
.store .list .text {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
@ -594,13 +619,14 @@ page{
border-radius: 6rpx;
border: 1px solid #0F74BB;
justify-content: center;
align-items: center;
color: #0F74BB;
font-size: 20rpx;
line-height: 39rpx;
image {
width: 20rpx;
height: 23rpx;
margin-right: 8rpx;
margin-top: 7rpx;
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -1,6 +1,6 @@
<template>
<view class="uni-date">
<view class="uni-date-editor" @click="show">
<view class="uni-date-editor" @click="show" :style="`visibility: ${showDateInput ? 'visible' : 'hidden'}`">
<slot>
<view class="uni-date-editor--x"
:class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}">
@ -254,7 +254,11 @@
defaultValue: {
type: [String, Object, Array],
default: ''
}
},
showDateInput: {
type: [Boolean],
default: true,
},
},
watch: {
type: {
@ -465,6 +469,7 @@
this.windowWidth = windowWidth
},
show() {
console.log('show =====>');
this.$emit("show")
if (this.disabled) {
return
@ -749,7 +754,10 @@
this.displayRangeValue.endDate = end
const displayRange = [start, end]
this.setEmit(displayRange)
this.pickerVisible = false
this.pickerVisible = false;
if (!this.showDateInput) {
this.$emit('dateChange');
}
},
handleStartAndEnd(before, after, temp = false) {
if (!before) return

Loading…
Cancel
Save