退款退货流程页面

This commit is contained in:
2022-06-11 11:06:05 +08:00
parent 74064e17ce
commit f0285c99aa
33 changed files with 9262 additions and 2219 deletions

View File

@@ -53,11 +53,73 @@ const logistic = id => {
}) })
} }
// 退货
const refund = (id,method,params) => {
return request({
url: 'mall/orders/' + id + '/refund',
method:method,
data:params
})
}
// 退货前置
const refundpre = (id) => {
return request({
url: 'mall/orders/' + id + '/refundpre'
})
}
// 货款、售后列表
const refunds = data => {
return request({
url: 'mall/refunds',
data
})
}
// 货款、售后详情
const refundsInfo = id => {
return request({
url: 'mall/refunds/'+id
})
}
// 货款、售后j 进度
const refundsLogs = id => {
return request({
url: 'mall/refunds/'+id+'/logs'
})
}
// 物流列表
const deliverpre = ()=> {
return request({
url: 'mall/refunds/deliverpre'
})
}
// 提交发货接口
const refundsDeliver = (id,data) => {
return request({
url: 'mall/refunds/'+id+'/deliver',
method:'post',
data
})
}
export { export {
orders, orders,
info, info,
del, del,
cancel, cancel,
sign, sign,
logistic logistic,
refund,
refundpre,
refunds,
refundsInfo,
refundsLogs,
deliverpre,
refundsDeliver,
} }

View File

@@ -1,301 +1,363 @@
{ {
"pages": [{ "pages" : [
"path": "pages/auth/auth", {
"name": "Auth", "path" : "pages/auth/auth",
"style": { "name" : "Auth",
"navigationBarTitleText": "登录", "style" : {
"navigationStyle": "custom" "navigationBarTitleText" : "登录",
"navigationStyle" : "custom"
} }
}, },
{ {
"path": "pages/auth/role", "path" : "pages/auth/role",
"name": "AuthRole", "name" : "AuthRole",
"style": { "style" : {
"navigationBarTitleText": "角色创建", "navigationBarTitleText" : "角色创建",
"navigationBarBackgroundColor": "#FFF", "navigationBarBackgroundColor" : "#FFF",
"app-plus": { "app-plus" : {
"titleNView": { "titleNView" : {
"buttons": [{ "buttons" : [
"text": "退出登录",
"fontSize": "14",
"width": "80px",
"color": "#34CE98"
}]
}
}
}
}, {
"path": "pages/life/life",
"name": "Life",
"style": {
"navigationBarTitleText": "共力人生",
"navigationStyle": "custom"
}
},
{ {
"path": "pages/store/index", "text" : "退出登录",
"name": "Store", "fontSize" : "14",
"style": { "width" : "80px",
"navigationBarTitleText": "DT商城", "color" : "#34CE98"
"enablePullDownRefresh": true, }
"app-plus": { ]
"titleNView": {
"backgroundColor": "#FFFFFF",
"buttons": [{
"float": "right",
"text": "\ue603",
"fontSrc": "/static/iconfont.ttf",
"color": "#000",
"fontSize": "20px"
}]
} }
} }
} }
}, },
{ {
"path": "pages/user/index", "path" : "pages/life/life",
"name": "User", "name" : "Life",
"style": { "style" : {
"navigationBarTitleText": "我的", "navigationBarTitleText" : "共力人生",
"navigationStyle": "custom" "navigationStyle" : "custom"
} }
}, },
{ {
"path": "pages/setting/setting", "path" : "pages/store/index",
"name": "Setting", "name" : "Store",
"style": { "style" : {
"navigationBarTitleText": "设置中心", "navigationBarTitleText" : "DT商城",
"navigationBarBackgroundColor": "#34CE98", "enablePullDownRefresh" : true,
"navigationBarTextStyle": "white" "app-plus" : {
} "titleNView" : {
}, "backgroundColor" : "#FFFFFF",
"buttons" : [
{ {
"path": "pages/store/goods", "float" : "right",
"name": "StoreGoods", "text" : "\ue603",
"style": { "fontSrc" : "/static/iconfont.ttf",
"navigationStyle": "custom", "color" : "#000",
"navigationBarTitleText": "详情", "fontSize" : "20px"
"app-plus": { }
"titleNView": { ]
"backgroundColor": "#FFFFFF",
"type": "transparent"
} }
} }
} }
}, },
{ {
"path": "pages/store/buy", "path" : "pages/user/index",
"name": "StoreBuy", "name" : "User",
"style": { "style" : {
"navigationBarTitleText": "确认订单", "navigationBarTitleText" : "我的",
"enablePullDownRefresh": false "navigationStyle" : "custom"
} }
}, },
{ {
"path": "pages/order/index", "path" : "pages/setting/setting",
"name": "Order", "name" : "Setting",
"style": { "style" : {
"navigationBarTitleText": "我的订单", "navigationBarTitleText" : "设置中心",
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor" : "#34CE98",
"enablePullDownRefresh": false "navigationBarTextStyle" : "white"
} }
}, },
{ {
"path": "pages/order/details", "path" : "pages/store/goods",
"name": "OrderDetails", "name" : "StoreGoods",
"style": { "style" : {
"navigationBarTitleText": "订单详情", "navigationStyle" : "custom",
"enablePullDownRefresh": false "navigationBarTitleText" : "详情",
"app-plus" : {
"titleNView" : {
"backgroundColor" : "#FFFFFF",
"type" : "transparent"
}
}
} }
}, },
{ {
"path": "pages/address/index", "path" : "pages/store/buy",
"name": "Address", "name" : "StoreBuy",
"style": { "style" : {
"navigationBarTitleText": "收货地址" "navigationBarTitleText" : "确认订单",
"enablePullDownRefresh" : false
} }
}, },
{ {
"path": "pages/address/edit", "path" : "pages/order/index",
"name": "AddressEdit", "name" : "Order",
"style": { "style" : {
"navigationBarTitleText": "编辑", "navigationBarTitleText" : "我的订单",
"enablePullDownRefresh": false "navigationBarBackgroundColor" : "#FFFFFF",
"enablePullDownRefresh" : false
} }
}, },
{ {
"path": "pages/pay/pay", "path" : "pages/order/details",
"name": "Pay", "name" : "OrderDetails",
"style": { "style" : {
"navigationBarTitleText": "收银台", "navigationBarTitleText" : "订单详情",
"navigationBarBackgroundColor": "#FFFFFF" "enablePullDownRefresh" : false
} }
}, },
{ {
"path": "pages/store/list", "path" : "pages/order/logistics",
"name": "StoreList", "name" : "OrderLogistics",
"style": { "style" : {
"navigationBarTitleText": "商品", "navigationBarTitleText" : "物流信息",
"navigationBarBackgroundColor": "#FFFFFF", "enablePullDownRefresh" : false
"enablePullDownRefresh": true
} }
}, },
{ {
"path": "pages/store/meals", "path" : "pages/address/index",
"name": "StoreMeals", "name" : "Address",
"style": { "style" : {
"navigationBarTitleText": "套餐", "navigationBarTitleText" : "收货地址"
"navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": true
} }
}, },
{ {
"path": "pages/store/search", "path" : "pages/address/edit",
"name": "StoreSearch", "name" : "AddressEdit",
"style": { "style" : {
"navigationBarTitleText": "搜索", "navigationBarTitleText" : "编辑",
"navigationBarBackgroundColor": "#FFFFFF" "enablePullDownRefresh" : false
} }
}, },
{ {
"path": "pages/refund/list", "path" : "pages/pay/pay",
"name": "OrderRefund", "name" : "Pay",
"style": { "style" : {
"navigationBarTitleText": "退换货", "navigationBarTitleText" : "收银台",
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarBackgroundColor" : "#FFFFFF"
} }
},{ },
"path": "pages/refund/aftersale", {
"name": "AfterSale", "path" : "pages/store/list",
"style": { "name" : "StoreList",
"navigationBarTitleText": " 选择售后类型", "style" : {
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarTitleText" : "商品",
"navigationBarBackgroundColor" : "#FFFFFF",
"enablePullDownRefresh" : true
} }
}, { },
"path": "pages/refund/refund_or_exchange_apply", {
"name": "RefundOrExchangeApply", "path" : "pages/store/meals",
"style": { "name" : "StoreMeals",
"navigationBarTitleText": "退换货申请", "style" : {
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarTitleText" : "套餐",
"navigationBarBackgroundColor" : "#FFFFFF",
"enablePullDownRefresh" : true
} }
}, { },
"path": "pages/refund/exchange", {
"name": "Exchange", "path" : "pages/store/search",
"style": { "name" : "StoreSearch",
"navigationBarTitleText": "换货", "style" : {
"navigationBarBackgroundColor": "#FFFFFF" "navigationBarTitleText" : "搜索",
"navigationBarBackgroundColor" : "#FFFFFF"
} }
}, { },
"path": "pages/account/integral", {
"name": "AccountIntegral", "path" : "pages/refund/list",
"style": { "name" : "OrderRefund",
"navigationBarTitleText": "共力值", "style" : {
"navigationBarBackgroundColor": "#34CE98", "navigationBarTitleText" : "退款/售后",
"navigationBarTextStyle": "white" "navigationBarBackgroundColor" : "#FFFFFF",
"enablePullDownRefresh" : true
} }
}, { },
"path": "pages/account/dt", {
"name": "AccountDt", "path" : "pages/refund/detail",
"style": { "name" : "OrderRefundDetail",
"navigationBarTitleText": "DT积分", "style" : {
"navigationBarBackgroundColor": "#34CE98", "navigationBarTitleText" : "退货退款详情",
"backgroundColorTop": "#34CE98", "navigationBarBackgroundColor" : "#FFFFFF"
"navigationBarTextStyle": "white", }
"app-plus": { },
"titleNView": { {
"buttons": [{ "path" : "pages/refund/aftersale",
"text": "充值", "name" : "AfterSale",
"width": "60", "style" : {
"fontSize": "14" "navigationBarTitleText" : " 选择售后类型",
}] "navigationBarBackgroundColor" : "#FFFFFF"
}
},
{
"path" : "pages/refund/refund_history",
"name" : "RefundHistory",
"style" : {
"navigationBarTitleText" : "售后历史",
"navigationBarBackgroundColor" : "#FFFFFF"
}
},
{
"path" : "pages/refund/deliver_form",
"name" : "DeliverForm",
"style" : {
"navigationBarTitleText" : "填写物流信息",
"navigationBarBackgroundColor" : "#FFFFFF"
}
},
{
"path" : "pages/refund/refund_or_exchange_apply",
"name" : "RefundOrExchangeApply",
"style" : {
"navigationBarTitleText" : "退换货申请",
"navigationBarBackgroundColor" : "#FFFFFF"
}
},
{
"path" : "pages/refund/exchange",
"name" : "Exchange",
"style" : {
"navigationBarTitleText" : "换货",
"navigationBarBackgroundColor" : "#FFFFFF"
}
},
{
"path" : "pages/refund/refund_money",
"name" : "RefundMoney",
"style" : {
"navigationBarTitleText" : "申请退款",
"navigationBarBackgroundColor" : "#FFFFFF"
}
},
{
"path" : "pages/account/integral",
"name" : "AccountIntegral",
"style" : {
"navigationBarTitleText" : "共力值",
"navigationBarBackgroundColor" : "#34CE98",
"navigationBarTextStyle" : "white"
}
},
{
"path" : "pages/account/dt",
"name" : "AccountDt",
"style" : {
"navigationBarTitleText" : "DT积分",
"navigationBarBackgroundColor" : "#34CE98",
"backgroundColorTop" : "#34CE98",
"navigationBarTextStyle" : "white",
"app-plus" : {
"titleNView" : {
"buttons" : [
{
"text" : "充值",
"width" : "60",
"fontSize" : "14"
}
]
} }
} }
} }
}, { },
"path": "pages/account/recharge", {
"name": "AccountRecharge", "path" : "pages/account/recharge",
"style": { "name" : "AccountRecharge",
"navigationBarTitleText": "DT积分充值", "style" : {
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarTitleText" : "DT积分充值",
"app-plus": { "navigationBarBackgroundColor" : "#FFFFFF",
"titleNView": { "app-plus" : {
"buttons": [{ "titleNView" : {
"text": "充值记录", "buttons" : [
"width": "80", {
"fontSize": "14" "text" : "充值记录",
}] "width" : "80",
"fontSize" : "14"
}
]
} }
} }
} }
}, { },
"path": "pages/vip/vip", {
"name": "Vip", "path" : "pages/vip/vip",
"style": { "name" : "Vip",
"navigationBarTitleText": "共力会员", "style" : {
"navigationBarBackgroundColor": "#242430", "navigationBarTitleText" : "共力会员",
"navigationBarTextStyle": "white", "navigationBarBackgroundColor" : "#242430",
"backgroundColorTop": "#242430" "navigationBarTextStyle" : "white",
"backgroundColorTop" : "#242430"
} }
}, { },
"path": "pages/vip/agreement", {
"style": { "path" : "pages/vip/agreement",
"navigationBarTitleText": "共力会员协议" "style" : {
"navigationBarTitleText" : "共力会员协议"
} }
}, { },
"path": "pages/team/index", {
"name": "Team", "path" : "pages/team/index",
"style": { "name" : "Team",
"navigationBarTitleText": "共力团队", "style" : {
"enablePullDownRefresh": false "navigationBarTitleText" : "共力团队",
"enablePullDownRefresh" : false
} }
}, },
{ {
"path" : "pages/store/shop/shopDetail", "path" : "pages/store/shop/shopDetail",
"name": "ShopDetail", "name" : "ShopDetail",
"style": { "style" : {
"navigationStyle": "custom" "navigationStyle" : "custom"
} }
}, },
{ {
"path": "pages/store/shop/shopList", "path" : "pages/store/shop/shopList",
"name": "ShopList", "name" : "ShopList",
"style": { "style" : {
"navigationBarTitleText": "更多店铺", "navigationBarTitleText" : "更多店铺",
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor" : "#FFFFFF",
"enablePullDownRefresh": true "enablePullDownRefresh" : true
} }
} }
], ],
"tabBar": { "tabBar" : {
"borderStyle": "white", "borderStyle" : "white",
"selectedColor": "#34CE98", "selectedColor" : "#34CE98",
"list": [{ "list" : [
"iconPath": "static/tabBar/tabBar_02.png", {
"selectedIconPath": "static/tabBar/tabBar_show_02.png", "iconPath" : "static/tabBar/tabBar_02.png",
"pagePath": "pages/life/life", "selectedIconPath" : "static/tabBar/tabBar_show_02.png",
"text": "共力人生" "pagePath" : "pages/life/life",
}, { "text" : "共力人生"
"iconPath": "static/tabBar/tabBar_02.png",
"selectedIconPath": "static/tabBar/tabBar_show_02.png",
"pagePath": "pages/store/index",
"text": "DT商城"
}, {
"iconPath": "static/tabBar/tabBar_03.png",
"selectedIconPath": "static/tabBar/tabBar_show_03.png",
"pagePath": "pages/user/index",
"text": "我的"
}]
}, },
"globalStyle": { {
"navigationBarTextStyle": "black", "iconPath" : "static/tabBar/tabBar_02.png",
"navigationBarTitleText": "ZH健康", "selectedIconPath" : "static/tabBar/tabBar_show_02.png",
"navigationBarBackgroundColor": "#F3F6FB", "pagePath" : "pages/store/index",
"backgroundColorTop": "#F3F6FB", "text" : "DT商城"
"backgroundColorBottom": "#F3F6FB"
}, },
"easycom": { {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "iconPath" : "static/tabBar/tabBar_03.png",
"selectedIconPath" : "static/tabBar/tabBar_show_03.png",
"pagePath" : "pages/user/index",
"text" : "我的"
}
]
},
"globalStyle" : {
"navigationBarTextStyle" : "black",
"navigationBarTitleText" : "ZH健康",
"navigationBarBackgroundColor" : "#F3F6FB",
"backgroundColorTop" : "#F3F6FB",
"backgroundColorBottom" : "#F3F6FB"
},
"easycom" : {
"^u-(.*)" : "uview-ui/components/u-$1/u-$1.vue"
} }
} }

View File

@@ -2,24 +2,12 @@
<view class="content"> <view class="content">
<!-- tabs --> <!-- tabs -->
<u-sticky> <u-sticky>
<u-tabs <u-tabs class="tabs" :list="tabs" :scrollable="false" :current="index" lineColor="#34CE98" @click="onTabs"
class="tabs" sticky />
:list="tabs"
:scrollable="false"
:current="index"
lineColor="#34CE98"
@click="onTabs"
sticky
></u-tabs>
</u-sticky> </u-sticky>
<block v-if="array.length >= 1"> <block v-if="array.length >= 1">
<!-- 订单列表 --> <!-- 订单列表 -->
<oct-order <oct-order v-for="(item, arrayIndex) in array" :key="arrayIndex" :order-info="item" @onBtn="onType" />
v-for="(item, arrayIndex) in array"
:key="arrayIndex"
:order-info="item"
@onBtn="onType"
></oct-order>
<!-- 加载更多 --> <!-- 加载更多 -->
<view class="pages-load"> <view class="pages-load">
<u-loadmore :status="status" /> <u-loadmore :status="status" />
@@ -27,37 +15,53 @@
</block> </block>
<block v-else> <block v-else>
<view class="vertical order-null"> <view class="vertical order-null">
<u-empty <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无相关订单"
mode="order" textColor="#999" />
icon="http://cdn.uviewui.com/uview/empty/order.png"
text="暂无相关订单"
textColor="#999"
></u-empty>
</view> </view>
</block> </block>
</view> </view>
</template> </template>
<script> <script>
import { orders, del, cancel, sign } from '@/apis/interfaces/order' import {
orders,
del,
cancel,
sign
} from '@/apis/interfaces/order'
import eventBus from '../../utils/eventBus.js';
export default { export default {
data() { data() {
return { return {
status: "loading", status: "loading",
tabs: [ tabs: [{
{name: "全部", type: ""}, name: "全部",
{name: "待付款", type: "unpay"}, type: "",
{name: "待发货", type: "paid"}, },
{name: "待签收", type: "delivered"}, {
{name: "已完成", type: "completed"}, name: "待付款",
type: "unpay",
},
{
name: "待发货",
type: "paid",
},
{
name: "待签收",
type: "delivered",
},
{
name: "已完成",
type: "completed",
},
], ],
index: 0, index: '0',
array: [], array: [],
page : 1 page: 1
}; };
}, },
onShow() { onShow() {
if(this.$store.getters.getRefresh == 1) { if (this.$store.getters.getRefresh == 1) {
this.$store.commit('setRefresh', 0) this.$store.commit('setRefresh', 0)
this.array = [] this.array = []
this.page = 1 this.page = 1
@@ -67,46 +71,117 @@
mounted() { mounted() {
this.index = this.$Route.query.index this.index = this.$Route.query.index
this.getOrder() this.getOrder()
eventBus.$on('paySuccess', function(data) {
let index = this.array.findIndex((item) => item.no === data);
console.log(typeof this.index, this.index)
if (this.index == '0') {
this.array[index].stateText = '待发货'
this.array[index].cans = {
"cancel": false,
"pay": false,
"sign": false,
"refund": true,
"user_deliver": false,
"logistic_show": false,
"refund_money": true
}
} else {
this.array.splice(index, 1);
}
}.bind(this));
eventBus.$on('applyRefundMoney', (data)=> {
console.log(data,'data....');
let index = this.array.findIndex((item) => item.no === data);
this.array.splice(index, 1);
});
}, },
methods:{ methods: {
getOrder(){ getOrder() {
orders({ orders({
state: this.tabs[this.index].type, state: this.tabs[this.index].type,
page : this.page page: this.page
}).then(res => { }).then(res => {
if(res.page.current === 1){ console.log(res);
if (res.page.current === 1) {
this.array = [] this.array = []
} }
let ordersArr = res.data.map(val => { let ordersArr = res.data.map(val => {
return { return {
no : val.order_no, no: val.order_no,
cover : val.items[0].sku.cover, cover: val.items[0].sku.cover,
name : val.items[0].sku.goods_name, name: val.items[0].sku.goods_name,
price : val.total, price: val.total,
sum : val.items[0].qty, sum: val.items[0].qty,
stateText : val.state, stateText: val.state,
cans : val.can cans: val.can,
shop: val.shop,
goods_id:val.items[0].sku.goods_id
} }
}) })
this.array = this.array.concat(ordersArr) this.array = this.array.concat(ordersArr)
this.status = res.page.has_more ? 'loadmore' : 'nomore' this.status = res.page.has_more ? 'loadmore' : 'nomore'
}) })
}, },
onTabs(e){ onTabs(e) {
this.page = 1 this.page = 1
this.index = e.index this.index = e.index
this.getOrder() this.getOrder()
}, },
onType(e){
let orderNo = e.order.no
let onFount
switch (e.type){ onType(e) {
let orderNo = e.order.no;
let shopId = e.order.shop.shop_id;
let goodsId = e.order.goods_id;
let onFount;
switch (e.type) {
case 'delete': case 'delete':
onFount = del(orderNo) onFount = del(orderNo);
break; break;
case 'cancel': case 'cancel':
onFount = cancel(orderNo) uni.showModal({
title: '温馨提示',
content: '是否确认取消该订单',
confirmText: '确认取消',
confirmColor: "#34CE98",
cancelText: '再想想',
cancelColor: "#666666",
success: (res) => {
if (res.confirm) {
cancel(orderNo).then(res => {
console.log(res)
let orderIndex = this.array.findIndex(val => val.no === e
.order.no)
console.log(this.index, typeof this.index, orderIndex);
if (this.index == '0') {
this.array[orderIndex].stateText = "已取消";
this.array[orderIndex].cans = {
"cancel": false,
"pay": false,
"sign": false,
"refund": false,
"user_deliver": false,
"logistic_show": false,
"refund_money": false
};
} else {
this.array.splice(orderIndex, 1);
}
return;
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
})
})
}
}
});
break; break;
case 'logistic': case 'logistic':
this.$Router.push({ this.$Router.push({
@@ -114,53 +189,115 @@
params: { params: {
orderNo orderNo
}, },
}) });
break; break;
case 'pay': case 'pay':
this.$Router.push({ this.$Router.push({
name: 'Pay', name: 'Pay',
params: { params: {
orderNo : orderNo, orderNo: orderNo,
price : e.order.price, price: e.order.price,
oepnType: 'order' oepnType: 'order',
coins: e.order.coins
} }
}) });
break; break;
case 'sign': case 'sign':
onFount = sign(orderNo) uni.showModal({
title: '温馨提示',
content: '是否确认收到货物并签收该订单',
confirmText: '确认签收',
confirmColor: "#34CE98",
cancelText: '再想想',
cancelColor: "#666666",
success: (res) => {
if (res.confirm) {
sign(orderNo).then(res => {
console.log(res)
let orderIndex = this.array.findIndex(val => val.no === e
.order.no)
console.log(this.index, typeof this.index, orderIndex);
if (this.index == '0') {
this.array[orderIndex].stateText = "已签收";
this.array[orderIndex].cans = {
"cancel": false,
"pay": false,
"sign": false,
"refund": true,
"user_deliver": false,
"logistic_show": true,
"refund_money": false
};
} else {
this.array.splice(orderIndex, 1);
}
return;
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
})
})
}
}
});
break;
case 'refundMoney':
this.$Router.push({
name: "RefundMoney",
params: {
id: orderNo
}
})
break;
case 'refund' :
this.$Router.push({
name: "AfterSale",
params: {
id: orderNo
}
})
break;
case 'shopsDetail':
this.$Router.push({ name: 'ShopDetail', params: {shopId: shopId}})
break;
case 'goodsDetail':
this.$Router.push({ name: 'StoreGoods', params: {id: goodsId}})
break; break;
} }
if (!onFount) return
onFount.then(res => {
console.log(res)
if(!onFount) return
onFount.then(res =>{
let orderIndex = this.array.findIndex(val => val.no === e.order.no) let orderIndex = this.array.findIndex(val => val.no === e.order.no)
if(e.type === 'delete' || e.type === 'sign'){ if (e.type === 'delete' || e.type === 'sign') {
this.array.splice(orderIndex, 1) this.array.splice(orderIndex, 1)
return return;
} }
if(e.type === 'cancel'){ if (e.type === 'cancel') {
this.array.splice(orderIndex, 1, { this.array.splice(orderIndex, 1, {
no : res.order_no, no: res.order_no,
cover : res.items[0].sku.cover, cover: res.items[0].sku.cover,
name : res.items[0].sku.goods_name, name: res.items[0].sku.goods_name,
price : res.items[0].price, price: res.items[0].price,
sum : res.items[0].qty, sum: res.items[0].qty,
stateText : res.state, stateText: res.state,
cans : res.can cans: res.can
}) });
return
return;
} }
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : 'none' icon: 'none'
}) })
}) })
} }
}, },
onReachBottom() { onReachBottom() {
if(this.status === 'loadmore'){ if (this.status === 'loadmore') {
this.page += 1 this.page += 1
this.status = 'loading' this.status = 'loading'
this.getOrder() this.getOrder()
@@ -170,19 +307,22 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.content{ .content {
background: $window-color; background: $window-color;
min-height: 100vh; min-height: 100vh;
} }
.tabs{
.tabs {
background: white; background: white;
} }
// 数据列表空 // 数据列表空
.order-null{ .order-null {
height: 80vh; height: 80vh;
} }
// 加载分页 // 加载分页
.pages-load{ .pages-load {
padding-bottom: $padding; padding-bottom: $padding;
} }
</style> </style>

View File

@@ -6,6 +6,7 @@
</template> </template>
<script> <script>
import eventBus from '../../utils/eventBus.js';
import { import {
wxPAY, wxPAY,
alPAY, alPAY,
@@ -17,13 +18,18 @@
payNo: "", payNo: "",
price: "", price: "",
coins: "", coins: "",
platform: ['dtpay'] platform: ['dtpay'],
oepnType: '',
} }
}, },
mounted() { mounted() {
this.payNo = this.$Route.query.orderNo this.payNo = this.$Route.query.orderNo
this.price = Number(this.$Route.query.price).toFixed(2) this.price = Number(this.$Route.query.price).toFixed(2)
this.coins = this.$Route.query.coins this.coins = this.$Route.query.coins
if (this.$Route.query.oepnType === 'order') {
console.log('order....');
this.oepnType = this.$Route.query.oepnType
}
}, },
methods: { methods: {
pay(e) { pay(e) {
@@ -76,6 +82,21 @@
} }
} }
}) })
} else {
if (this.oepnType === 'order') {
uni.showModal({
title: '支付成功',
content: '该订单已支付成功',
confirmText: ' 返回订单',
confirmColor: "#34CE98",
showCancel: false,
success: (res) => {
if (res.confirm) {
this.$Router.back();
eventBus.$emit('paySuccess', this.payNo);
}
}
})
} else { } else {
uni.showModal({ uni.showModal({
title: '支付成功', title: '支付成功',
@@ -85,16 +106,21 @@
cancelText: '再逛逛', cancelText: '再逛逛',
cancelColor: "#666666", cancelColor: "#666666",
success: (res) => { success: (res) => {
// if (res.confirm) { if (res.confirm) {
// this.$Router.push({ this.$Router.push({
// name: "AccountRecharge" name: "Order",
// }) params: {
// } else { index: 0
// uni.navigateBack(); },
// } })
} else {
uni.navigateBack();
}
} }
}) })
} }
}
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,

View File

@@ -4,12 +4,12 @@
<view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view> <view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view>
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<view class="goods-item" @click="onGoods(goodsInfo.goods_id)"> <view class="goods-item" >
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" /> <image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<view class="item--content"> <view class="item--content">
<view class="title">{{goodsInfo.name}}</view> <view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title">{{goodsInfo.shop.name}}</view> <view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class="price">{{goodsInfo.price.price_min || '0'}} <view class="price">{{goodsInfo.price || '0'}}
<view class="price-type"> <view class="price-type">
<text> DT积分</text> <text> DT积分</text>
</view> </view>
@@ -28,7 +28,7 @@
</view> </view>
<view class="sales-item-right"> <view class="sales-item-right">
<view class="sales-des"> <view class="sales-des">
<text> 2022-06-22 前可申请</text> <text> {{refundTime}} 前可申请</text>
<text class="red">支持七天无理由退货</text> <text class="red">支持七天无理由退货</text>
<text class="red">(一次性包装破损不支持)</text> <text class="red">(一次性包装破损不支持)</text>
</view> </view>
@@ -44,7 +44,7 @@
</view> </view>
<view class="sales-item-right"> <view class="sales-item-right">
<view class="sales-des"> <view class="sales-des">
<text> 2022-06-22 前可申请</text> <text> {{changeTime}} 前可申请</text>
</view> </view>
<uni-icons class="icon-right" size="16" type="right" /> <uni-icons class="icon-right" size="16" type="right" />
</view> </view>
@@ -57,42 +57,54 @@
</template> </template>
<script> <script>
import {refundpre} from '@/apis/interfaces/order.js'
export default { export default {
data() { data() {
return { return {
goodsInfo: { goodsInfo: {},
"goods_id": 56, id: '',
"shop": { refundTime:'',
"shop_id": 1, changeTime:'',
"name": "平台自营店铺",
"cover": "",
"is_self": true
},
"is_self": true,
"name": "铜锣烧蛋糕铜锣烧蛋糕铜锣烧",
"description": "口感丰富,悠闲小食",
"cover": "https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/08/0dcb67738c93b2e1c8a489d8ac39266e.png",
"tags": [],
"original_price": 155,
"price": {
"show": "100",
"score": 1,
"price_min": 100,
"price_max": 100
},
"clicks": 0,
"sales": 7394
},
} }
}, },
onLoad() {
console.log(this.$Route.query.id);
this.id = this.$Route.query.id;
this.getBaseInfo();
},
methods: { methods: {
getBaseInfo(){
refundpre(this.id).then(res=>{
console.log(res)
this.goodsInfo = res.order.items[0].sku;
this.goodsInfo.shop =res.order.shop;
this.refundTime = res.refundTime;
this.changeTime = res.changeTime;
}).catch(err=>{
uni.showToast({
title:err.message,
icon:'none',
mask:true,
})
})
},
goSales(type) { goSales(type) {
if (type == 'refund') {
this.$Router.push({ this.$Router.push({
name: 'RefundOrExchangeApply', name: 'RefundOrExchangeApply',
params:{ params: {
type:type type: type,
id:this.id,
} }
}); });
} else {
uni.showToast({
title:'努力开发中,敬请期待',
icon:'none',
mask:true,
duration:3000,
})
}
} }
} }
} }

View File

@@ -0,0 +1,156 @@
<template>
<view>
<form @submit="sendSubmit">
<view class="nickname">
<view class="examineTitle">
选择发货方式
</view>
<view class="toExamine" v-if="send.sendWay[send.sendIndex]">
<picker mode="selector" :value="send.sendIndex" range-key="name" :range="send.sendWay" @change="wayChange">
<view>{{send.sendWay[send.sendIndex].name}}</view>
</picker>
<image class="toExamine-row" src="/static/icon/goods_row.png" mode="aspectFill"></image>
</view>
</view>
<view class="nickname" >
<view class="examineTitle">
选择快递公司
</view>
<view class="toExamine" v-if="state.array[state.index]">
<picker mode="selector" :value="state.index" range-key="name" :range="state.array" @change="sexChange">
<view>{{state.array[state.index].name}}</view>
</picker>
<image class="toExamine-row" src="/static/icons/goods_row.png" mode="aspectFill"></image>
</view>
</view>
<view class="nickname">
<view class="examineTitle">
填写快递单号
</view>
<input class="remarks" @blur="bindExpressNo" auto-height placeholder="请输入订单单号" />
</view>
<button class="submit" form-type="submit" type="default">提交</button>
</form>
</view>
</template>
<script>
import { deliverpre,refundsDeliver } from '@/apis/interfaces/order.js'
export default {
data() {
return {
send : {
sendWay : [{
id : 'post',
name : '自行邮寄'
}],
sendIndex : 0,
},
state : {
// 快递筛选
array : [],
// 快递筛选默认下标
index : 0,
},
expressNo : '',
}
},
onLoad() {
deliverpre().then(res=>{
console.log(res)
this.state.array = res.expresses
}).catch(err=>{
console.log(err);
})
},
methods: {
// 选择发货方式
wayChange(e) {
this.send.sendIndex = e.detail.value
this.expressNo = ''
this.courierName = ''
this.courierMobile = ''
},
// 筛选
sexChange(e) {
this.state.index = e.detail.value
},
// 快递单号
bindExpressNo(val) {
this.expressNo = val.detail.value
},
// 送货人姓名
bindCourierName(val) {
this.courierName = val.detail.value
},
// 送货人联系方式
bindCourierMobile(val) {
this.courierMobile = val.detail.value
},
// 提交表单
sendSubmit() {
refundsDeliver(this.$Route.query.id,{
company : this.state.array[this.state.index].name || '',
number : this.expressNo || '',
}).then(res=>{
uni.showToast({
icon: 'none',
title: '发送成功',
mask:true,
})
setTimeout(()=>{
this.$Router.back()
},2002)
})
}
}
}
</script>
<style lang="scss" scoped>
.nickname {
background-color: #FFFFFF;
padding: $padding;
margin-bottom: $margin;
display: flex;
position: relative;
font-size: $title-size-lg;
border-bottom: solid 1rpx #f9f9f9;
.examineTitle {
width: 210rpx;
}
.remarks {
width: calc(100% - 210rpx);
font-size: $title-size-lg;
color: $text-color;
text-align: right;
}
.toExamine {
position: absolute;
top: $padding;
right: $padding;
display: flex;
.toExamine-row {
width: 32rpx;
height: 32rpx;
margin-top: 6rpx;
filter: grayscale(100%);
}
}
}
.submit {
background: #34ce98;
color: white;
border-color: #34ce98;
margin: $margin*4 $margin 0;
}
</style>

466
pages/refund/detail.vue Normal file
View File

@@ -0,0 +1,466 @@
<template>
<view class="afterSales">
<view class="service-content">
<view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view>
</view>
<view class="plane">
<view class="plane-state">
<uni-steps class="steps" active-color='#fff' :active="process.index" deactive-color='#fff'
:options="process.data" />
<view class="title" v-if="refundInfo.state"> {{refundInfo.state.remark}}</view>
</view>
</view>
<view class="goods-item">
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<view class="item--content">
<view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class=" number">
{{goodsInfo.qty}}
</view>
</view>
</view>
<view class="total">
<view class="total-item grey">
申请金额<text>{{refundInfo.refund_total || '0.00'}} DT</text>
</view>
<view class="total-item">
合计退款<text>{{refundInfo.refund_total|| '0.00'}} DT</text>
</view>
</view>
<view class="block info-box" v-if="type == 1">
<view class="info-item">
<view class="label">售后类型</view>
<view class="content">{{refundInfo.type.text}}</view>
</view>
<view class="info-item">
<view class="label">退款原因</view>
<view class="content">{{refundInfo.log.title}}</view>
</view>
</view>
<view class="block info-box" v-if="type == 2">
<view class="info-item">
<view class="label">售后类型</view>
<view class="content">{{refundInfo.type.text}}</view>
</view>
<view class="info-item">
<view class="label">退货原因</view>
<view class="content">{{refundInfo.log.title}}</view>
</view>
<view class="info-item">
<view class="label">退货方式</view>
<view class="content">自行寄回</view>
</view>
</view>
<view class="total" v-if="refundInfo.shopAddress">
<view class="total-item grey" @longtap='copy(refundInfo.shopAddress.shopUser+ " "+refundInfo.shopAddress.shopMobile+" "+refundInfo.shopAddress.shopAddress)'>
<view class="title">寄件地址</view>
<view class='address'>
{{refundInfo.shopAddress.shopUser}} {{refundInfo.shopAddress.shopMobile}} {{refundInfo.shopAddress.shopAddress}}
<text>长按文字复制</text>
</view>
</view>
</view>
<view class="block info-box" v-if="refundInfo.can && refundInfo.can.user_deliver"
@click="$Router.push({name:'DeliverForm',params:{id:refundInfo.refund_no}})">
<view class="info-item">
<view class="label">完善物流</view>
<uni-icons type="right" color="#333" />
</view>
</view>
<view class="block info-box" @click="$Router.push({'name':'RefundHistory',params:{id:refundInfo.refund_no}})">
<view class="info-item">
<view class="label">售后历史</view>
<uni-icons type="right" color="#333" />
</view>
</view>
<view class="block info-box">
<view class="info-item">
<view class="label">售后单号</view>
<view class="content">{{refundInfo.refund_no}}</view>
</view>
<view class="info-item">
<view class="label">申请时间</view>
<view class="content">{{refundInfo.created_at}}</view>
</view>
</view>
</view>
</template>
<script>
import {
refundsInfo
} from '@/apis/interfaces/order.js'
import eventBus from '../../utils/eventBus.js';
export default {
data() {
return {
id: '',
remark: '',
money: '',
title: [],
ttext: '请选择申请原因',
tel: '',
goodsInfo: {},
type: '', // 1退款2退货3换货
process: {},
refundInfo: {}
}
},
onShow(e) {
this.id = this.$Route.query.id;
this.refund();
},
methods: {
refund() {
refundsInfo(this.$Route.query.id).then(res => {
console.log(res);
this.goodsInfo = res.items[0];
this.refundInfo = res;
this.type = res.type.state;
this.process = res.process
let title = ''
switch (res.type.state) {
case 1:
title = '退款详情'
break;
case 2:
title = '退货详情'
break;
case 3:
title = '换货详情'
break;
}
uni.setNavigationBarTitle({
title: title
})
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
})
})
},
copy(info){
uni.setClipboardData({
data:info,
showToast:false,
success:()=>{
uni.showToast({
title:'复制成功',
icon:'none',
mask:true,
})
}
})
}
}
}
</script>
<style lang="scss">
.history {}
.applyBtn {
width: 70%;
background-color: $main-color;
border-radius: 50rpx;
text-align: center;
padding: 20rpx $padding;
color: #fff;
position: relative;
left: 10%;
font-size: 32rpx;
margin-top: $margin * 2;
font-weight: bold;
}
.afterSales {
background-color: #f9f9f9;
min-height: 100vh;
.plane {
width: 100%;
.plane-state {
background: linear-gradient(to top right, #34ce98, #22aa98);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
padding: 60rpx $padding 40rpx $padding;
.title {
font-size: 40rpx;
color: #FFFFFF;
font-weight: bold;
margin-top: 20rpx;
}
}
.plane-history {
height: 400rpx;
padding: 40rpx $padding;
background-color: #fff;
}
}
.service-content {
background-color: #Fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.service {
font-size: 24rpx;
margin: $margin;
padding: 4rpx 20rpx;
border-radius: 30rpx;
background-color: #f9f9f9;
display: inline-;
text-align: center;
color: #666;
span {
color: $text-price;
}
}
}
.total {
background-color: #fff;
padding: 0 $padding $padding $padding;
border-top: solid 2rpx #f9f9f9;
font-size: 28rpx;
color: #333;
.total-item {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-top: $padding;
font-size: 30rpx;
.title {
width: 170rpx;
}
.address {
flex: 1;
text{
color: #84d4d6;
padding-left: 10rpx;
font-size: 26rpx;
}
}
}
.grey {
color: #666;
}
}
.goods-item {
background-color: #Fff;
width: 100%;
display: inline-block;
// border-bottom: solid 1rpx #eee;
// padding: $padding;
padding-left: $padding;
padding-top: $padding;
padding-bottom: $padding - 15;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.good-img {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.item--content {
flex: 1;
padding: $padding - 10;
.number {
font-size: 28rpx;
color: #666;
padding-top: 20rpx;
}
&>.title {
font-size: 30rpx;
color: #333;
font-weight: bold;
// @extend .ellipsis-1;
}
&>.sub_title {
color: #a05f0c;
font-size: 26rpx;
padding-top: 6rpx;
// @extend .ellipsis-1;
}
&>.price {
padding-top: 10rpx;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
box-sizing: border-box;
font-weight: bold;
font-size: 36rpx;
color: $text-price;
// @extend .ellipsis-1;
.price-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
flex: 1;
text {
margin-right: $margin/2;
padding-left: 10rpx;
font-size: 60%;
padding-bottom: 4rpx;
}
.kucun {
color: $text-gray;
font-weight: normal;
}
}
}
}
}
}
.apply-number {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
background-color: #fff;
padding: $padding;
border-radius: 0 0 30rpx 30rpx;
.apply-number-title {
font-size: 30rpx;
font-weight: bold;
text {
font-size: 26rpx;
color: grey;
font-weight: normal;
}
}
}
.block {
background: white;
margin-top: 20rpx;
}
// 订单信息
.info-box {
.info-item {
position: relative;
padding: 40rpx $padding 40rpx 200rpx;
font-size: $title-size-m;
min-height: 40rpx;
text-align: right;
.radio {
font-size: 28rpx;
font-weight: bold;
}
.label {
position: absolute;
left: 40rpx;
top: 40rpx;
color: $text-gray;
}
.content {
float: left;
color: $text-gray;
}
.contentHeight {
height: 120rpx;
}
.info-textarea {
height: 120rpx;
width: 100%;
text-align: left;
font-size: $title-size-m;
}
.info-textarea-m {
height: 120rpx;
width: 100%;
text-align: left;
font-size: 60rpx;
font-weight: bold;
}
&::after {
position: absolute;
left: $margin;
right: $margin;
content: " ";
height: 1rpx;
bottom: 0;
background: $border-color;
}
&:last-child::after {
display: none;
}
.info-item-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 28rpx;
font-weight: bold;
.icons {
padding-top: 2rpx;
font-weight: normal;
margin-left: 10rpx;
}
}
}
}
</style>

View File

@@ -1,27 +1,45 @@
<template> <template>
<view class="content"> <view class="content">
<!-- tabs --> <block v-if="array.length > 0">
<u-sticky>
<u-tabs
class="tabs"
:list="tabs"
:scrollable="false"
:current="index"
lineColor="#34CE98"
@click="onTabs"
sticky
></u-tabs>
</u-sticky>
<button type="default" @click="$Router.push({name:'AfterSale'})">售后</button>
<block v-if="array.length >= 1">
<!-- 订单列表 --> <!-- 订单列表 -->
<oct-order <view class="order--content" :class="[true ? 'chunk': 'broad']" v-for="(item, arrayIndex) in array"
v-for="(item, arrayIndex) in array" :key="arrayIndex">
:key="arrayIndex" <view class="order--group--header" @click=" $Router.push({ name: 'ShopDetail', params: {shopId: item.shop.shop_id}})">
:order-info="item" <image class="logo" v-if="item.shop.cover != ''" :src="item.shop.cover" mode="aspectFill"></image>
@onBtn="onType" <view class="store">
></oct-order> {{item.shop.name}}
<uni-icons type="right" size="16" color="#666" />
</view>
<view class="stateText">
<image v-if="item.type.state == 1" src="/static/icon/icon-money.png" mode="aspectFill" />
<image v-if="item.type.state == 2" src="/static/icon/icon-back.png" mode="aspectFill" />
<image v-if="item.type.state == 3" src="/static/icon/icon-exchange.png" mode="aspectFill" />
{{item.type.text}}
</view>
</view>
<view class="order--flex" @click="$Router.push({ name: 'StoreGoods', params: {id: item.items[0].goods_id}})">
<image class="order--cover" :src="item.items[0].cover" mode="aspectFill"></image>
<view class="order--title">{{item.items[0].goods_name}}</view>
<view class="order--count">
<view class="order--price">{{item.items[0].price}}<text>DT积分</text></view>
<view class="order--sum">{{item.items[0].qty}}</view>
</view>
</view>
<view class="order-state">
{{item.state.text}}
<view class="order-des">{{item.state.remark}}</view>
</view>
<view class="order--btns">
<view class="item item--cancle"
@click="$Router.push({name:'OrderRefundDetail',params:{id:item.refund_no}})">查看详情</view>
</view>
</view>
<!-- 加载更多 --> <!-- 加载更多 -->
<view class="pages-load"> <view class="pages-load">
<u-loadmore :status="status" /> <u-loadmore :status="status" />
@@ -29,35 +47,27 @@
</block> </block>
<block v-else> <block v-else>
<view class="vertical order-null"> <view class="vertical order-null">
<u-empty <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无相关订单"
mode="order" textColor="#999"></u-empty>
icon="http://cdn.uviewui.com/uview/empty/order.png"
text="暂无相关订单"
textColor="#999"
></u-empty>
</view> </view>
</block> </block>
</view> </view>
</template> </template>
<script> <script>
import { orders, del, cancel, sign } from '@/apis/interfaces/order' import {
refunds
} from '@/apis/interfaces/order.js'
export default { export default {
data() { data() {
return { return {
status: "loading", status: "loading",
tabs: [
{name: "售后申请", type: "unpay"},
{name: "处理中", type: "paid"},
{name: "申请记录", type: "completed"},
],
index: 0,
array: [], array: [],
page : 1 page: 1
}; };
}, },
onShow() { onShow() {
if(this.$store.getters.getRefresh == 1) { if (this.$store.getters.getRefresh == 1) {
this.$store.commit('setRefresh', 0) this.$store.commit('setRefresh', 0)
this.array = [] this.array = []
this.page = 1 this.page = 1
@@ -65,102 +75,41 @@
} }
}, },
mounted() { mounted() {
this.index = this.$Route.query.index
this.getOrder() this.getOrder()
}, },
methods:{ onPullDownRefresh() {
getOrder(){ console.log('onPullDownRefresh.....')
orders({ this.page = 1;
state: this.tabs[this.index].type, this.getOrder();
page : this.page },
methods: {
getOrder() {
refunds({
page: this.page
}).then(res => { }).then(res => {
if(res.page.current === 1){ console.log(res)
if (res.page.current === 1) {
this.array = [] this.array = []
} }
let ordersArr = res.data.map(val => { // let ordersArr = res.data.map(val => {
return { // return {
no : val.order_no, // no: val.order_no,
cover : val.items[0].sku.cover, // cover: val.items[0].sku.cover,
name : val.items[0].sku.goods_name, // name: val.items[0].sku.goods_name,
price : val.total, // price: val.total,
sum : val.items[0].qty, // sum: val.items[0].qty,
stateText : val.state, // stateText: val.state,
cans : val.can // cans: val.can
} // }
}) // })
this.array = this.array.concat(ordersArr) uni.stopPullDownRefresh();
this.status = res.page.has_more ? 'loadmore' : 'nomore' this.array = this.array.concat(res.data);
this.status = res.page.has_more ? 'loadmore' : 'nomore';
}) })
}, },
onTabs(e){
this.page = 1
this.index = e.index
this.getOrder()
},
onType(e){
let orderNo = e.order.no
let onFount
switch (e.type){
case 'delete':
onFount = del(orderNo)
break;
case 'cancel':
onFount = cancel(orderNo)
break;
case 'logistic':
this.$Router.push({
name: 'OrderLogistics',
params: {
orderNo
},
})
break;
case 'pay':
this.$Router.push({
name: 'Pay',
params: {
orderNo : orderNo,
price : e.order.price,
oepnType: 'order'
}
})
break;
case 'sign':
onFount = sign(orderNo)
break;
}
if(!onFount) return
onFount.then(res =>{
let orderIndex = this.array.findIndex(val => val.no === e.order.no)
if(e.type === 'delete' || e.type === 'sign'){
this.array.splice(orderIndex, 1)
return
}
if(e.type === 'cancel'){
this.array.splice(orderIndex, 1, {
no : res.order_no,
cover : res.items[0].sku.cover,
name : res.items[0].sku.goods_name,
price : res.items[0].price,
sum : res.items[0].qty,
stateText : res.state,
cans : res.can
})
return
}
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}, },
onReachBottom() { onReachBottom() {
if(this.status === 'loadmore'){ if (this.status === 'loadmore') {
this.page += 1 this.page += 1
this.status = 'loading' this.status = 'loading'
this.getOrder() this.getOrder()
@@ -170,19 +119,206 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.content{ .content {
background: $window-color; background: $window-color;
min-height: 100vh; min-height: 100vh;
} }
.tabs{
.tabs {
background: white; background: white;
} }
// 数据列表空 // 数据列表空
.order-null{ .order-null {
height: 80vh; height: 80vh;
} }
// 加载分页 // 加载分页
.pages-load{ .pages-load {
padding-bottom: $padding; padding-bottom: $padding;
} }
.text-nowrap {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.order--content {
background: white;
&.chunk {
margin: $margin $margin;
border-radius: $radius;
padding: $margin;
}
&.broad {
padding: $margin;
border-bottom: solid 1rpx #ddd;
}
.order--group--header {
padding-bottom: $margin;
display: flex;
justify-content: space-between;
align-items: center;
&>.logo {
width: 38rpx;
height: 38rpx;
vertical-align: middle;
margin-right: $margin/2;
}
&>.store {
@extend .text-nowrap;
flex: 1;
margin-right: $margin;
font-size: 28rpx;
line-height: 40rpx;
color: #555;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
&>.stateText {
font-size: 28rpx;
display: flex;
color: #444;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
image {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
}
}
.order--group--flex {
@extend .order--flex;
margin-bottom: $margin - 10;
&:last-child {
margin: 0;
}
}
.order--header {
display: flex;
justify-content: space-between;
padding-bottom: $margin;
align-items: center;
&>.order--no {
flex: 1;
margin-right: $margin;
font-size: 26rpx;
line-height: 40rpx;
color: #555;
@extend .text-nowrap;
}
&>.stateText {
font-size: 26rpx;
}
}
.order--flex {
display: flex;
align-items: center;
.order--cover {
vertical-align: top;
width: 128rpx;
height: 128rpx;
}
.order--title {
text-align: left;
flex: 1;
padding-left: $margin;
font-size: 28rpx;
line-height: 40rpx;
}
.order--count {
text-align: right;
padding-left: $margin;
line-height: 40rpx;
// color: $text-price;
.order--price {
font-size: 30rpx;
font-weight: bold;
&>text {
font-size: 24rpx;
font-weight: normal;
padding-left: 10rpx;
}
}
.order--sum {
font-size: 26rpx;
color: #777;
}
}
}
.order-state {
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: 26rpx;
padding: $padding $padding / 2 $padding 0;
.order-des {
padding-left: $padding - 10;
color: #777;
}
}
.order--btns {
border-top: solid 1rpx #f9f9f9;
display: flex;
justify-content: flex-end;
padding-top: $margin - 10;
&>.item {
font-size: 26rpx;
margin-left: $margin/2;
color: #333;
line-height: 56rpx;
border: solid 1rpx #ddd;
padding: 0 $padding;
border-radius: 10rpx;
&--cancel,
&--delete,
&--logistic {
color: #666;
}
&--pay,
&--sign {
color: #34CE98;
border-color: #34CE98;
}
}
}
}
</style> </style>

View File

@@ -0,0 +1,281 @@
<template>
<view class="RefundHistory">
<view class="goods-item">
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<view class="item--content">
<view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class=" number">
{{goodsInfo.qty}}
</view>
</view>
</view>
<view class="total">
<view class="total-item grey">
申请金额<text>{{refund_total || '0.00'}} DT</text>
</view>
<view class="total-item">
合计退款<text>{{refund_total|| '0.00'}} DT</text>
</view>
</view>
<view class="logistics--logs">
<block v-for="(log, logIndex) in logs" :key="logIndex">
<view class="item">
<view class="">{{log.state_text}}</view>
<view class="">{{log.created_at}}</view>
<view class="">{{log.remark}}</view>
</view>
</block>
</view>
</view>
</template>
<script>
import {
refundsLogs
} from '@/apis/interfaces/order.js'
export default {
data() {
return {
logs: [],
goodsInfo: {},
refund_total:''
}
},
onLoad() {
refundsLogs(this.$Route.query.id).then(res => {
console.log(res)
this.logs = res.logs
this.goodsInfo = res.refund.items[0]
this.refund_total = res.refund.refund_total
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
})
})
},
methods: {
copyNo() {
uni.setClipboardData({
data: this.info.no,
success: res => {
uni.showToast({
title: "单号已复制",
icon: "none"
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
$margin: 30rpx;
$radius: 10rpx;
.RefundHistory {
padding: $padding;
min-height: 100vh;
background-color: #f9f9f9;
}
.logistics--header {
position: relative;
background: linear-gradient(to right, #34ce98, #22aa98);
color: white;
padding: $margin $margin $margin*2;
min-height: 88rpx;
.logo {
width: 88rpx;
height: 88rpx;
background: white;
vertical-align: top;
}
.info {
position: absolute;
left: $margin * 2 + 88rpx;
top: $margin;
font-size: 28rpx;
&--no {
line-height: 44rpx;
font-weight: normal;
text {
margin-left: $margin/2;
}
}
&--company {
height: 44rpx;
line-height: 40rpx;
font-weight: normal;
}
}
}
.logistics--logs {
position: relative;
background: white;
border-radius: $radius $radius 0 0;
z-index: 9;
padding: $margin;
overflow: hidden;
margin-top: 30rpx;
min-height: 50vh;
.item {
position: relative;
margin-top: $margin;
padding-left: 50rpx;
font-size: 28rpx;
color: #444;
&::after,
&::before {
position: absolute;
content: " ";
}
&::before {
top: 10rpx;
left: 10rpx;
background-color: #ddd;
height: 200%;
width: 2rpx;
}
&::after {
width: 22rpx;
height: 22rpx;
background-color: #ddd;
left: 0;
top: 10rpx;
border-radius: 50%;
}
&:first-child {
margin-top: 0;
&::after {
background-color: #34CE98;
}
}
}
}
.goods-item {
background-color: #Fff;
width: 100%;
display: inline-block;
// border-bottom: solid 1rpx #eee;
// padding: $padding;
padding-left: $padding;
padding-top: $padding;
padding-bottom: $padding - 15;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.good-img {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.item--content {
flex: 1;
padding: $padding - 10;
.number {
font-size: 28rpx;
color: #666;
padding-top: 20rpx;
}
&>.title {
font-size: 30rpx;
color: #333;
font-weight: bold;
// @extend .ellipsis-1;
}
&>.sub_title {
color: #a05f0c;
font-size: 26rpx;
padding-top: 6rpx;
// @extend .ellipsis-1;
}
&>.price {
padding-top: 10rpx;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
box-sizing: border-box;
font-weight: bold;
font-size: 36rpx;
color: $text-price;
// @extend .ellipsis-1;
.price-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
flex: 1;
text {
margin-right: $margin/2;
padding-left: 10rpx;
font-size: 60%;
padding-bottom: 4rpx;
}
.kucun {
color: $text-gray;
font-weight: normal;
}
}
}
}
}
.total {
background-color: #fff;
padding: 0 $padding $padding $padding;
border-top: solid 2rpx #f9f9f9;
font-size: 28rpx;
color: #333;
.total-item {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-top: $padding;
text {
font-size: 32rpx;
}
}
.grey {
color: #666;
}
}
</style>

View File

@@ -0,0 +1,360 @@
<template>
<view class="afterSales">
<view class="service-content">
<view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view>
</view>
<!-- 商品信息 -->
<view class="goods-item">
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<view class="item--content">
<view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class="price">{{goodsInfo.price || '0'}}
<view class="price-type">
<text> DT积分</text>
</view>
</view>
</view>
</view>
<!-- 退货方式 -->
<view class="block info-box">
<view class="info-item">
<view class="label">申请类型</view>
<view class="nowrap info-item-title" >我要退款无需退货</view>
</view>
<view class="info-item">
<view class="label">申请原因</view>
<view class="nowrap info-item-title" @click="changeReason">{{ttext}}
<uni-icons class="icons" type="more-filled" color="grey" />
</view>
</view>
</view>
<view class="block info-box">
<view class="info-item">
<view class="label">申请金额</view>
<textarea class="info-textarea-m" v-model="money" :disabled="true"></textarea>
</view>
<view class="info-item">
<view class="label">备注</view>
<textarea class="info-textarea" v-model="remark" placeholder="请描述申请退款的具体原因"></textarea>
</view>
</view>
<view class="block info-box">
<view class="info-item">
<view class="label">联系电话</view>
<view class="nowrap info-item-title">{{tel}}</view>
</view>
</view>
<view class=" applyBtn" @click="refund(id,'post')">提交申请</view>
</view>
</template>
<script>
import {
refund
} from '@/apis/interfaces/order.js'
import eventBus from '../../utils/eventBus.js';
export default {
data() {
return {
id: '',
remark: '',
money: '',
title: [],
ttext: '请选择申请原因',
tel: '',
goodsInfo: {},
}
},
onLoad(e) {
console.log(this.$Route.query.id)
this.id = this.$Route.query.id;
this.refund(this.id, 'get');
},
methods: {
refund(id, method) {
let params = {};
if (method === 'post') {
params = {
title: this.ttext,
remark: this.remark,
pictures: [],
type:1,
};
if (this.ttext === '请选择申请原因') {
uni.showToast({
title: '请选择退款原因',
icon: 'none',
mask: true,
})
return;
}
}
refund(this.$Route.query.id, method, params).then(res => {
if (method === 'get') {
this.title = res.title;
this.money = res.order.amount
this.tel = res.user.username
this.goodsInfo = res.order.items[0].sku
this.goodsInfo.shop = res.order.shop
} else {
uni.showToast({
title: '申请退款成功, 请去退换货中查看订单',
icon: 'none',
mask: true,
duration: 3000,
})
setTimeout(() => {
eventBus.$emit('applyRefundMoney', this.$Route.query.id, );
this.$Router.back();
}, 3000)
}
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
})
})
},
changeReason() {
uni.showActionSheet({
title: '选择申请退款原因',
itemList: this.title,
success: (res) => {
this.ttext = this.title[res.tapIndex]
},
fail: (res) => {
console.log(res.errMsg);
}
});
}
}
}
</script>
<style lang="scss">
.applyBtn {
width: 70%;
background-color: $main-color;
border-radius: 50rpx;
text-align: center;
padding: 20rpx $padding;
color: #fff;
position: relative;
left: 10%;
font-size: 32rpx;
margin-top: $margin * 2;
font-weight: bold;
}
.afterSales {
background-color: #f9f9f9;
min-height: 100vh;
.service-content {
background-color: #Fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.service {
font-size: 24rpx;
margin: $margin;
padding: 4rpx 20rpx;
border-radius: 30rpx;
background-color: #f9f9f9;
display: inline-;
text-align: center;
color: #666;
span {
color: $text-price;
}
}
}
.goods-item {
background-color: #Fff;
width: 100%;
display: inline-block;
// border-bottom: solid 1rpx #eee;
// padding: $padding;
padding-left: $padding;
padding-top: $padding;
padding-bottom: $padding - 15;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.good-img {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.item--content {
flex: 1;
padding: $padding - 10;
&>.title {
font-size: 30rpx;
color: #333;
font-weight: bold;
// @extend .ellipsis-1;
}
&>.sub_title {
color: #a05f0c;
font-size: 26rpx;
padding-top: 6rpx;
// @extend .ellipsis-1;
}
&>.price {
padding-top: 10rpx;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
box-sizing: border-box;
font-weight: bold;
font-size: 36rpx;
color: $text-price;
// @extend .ellipsis-1;
.price-type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
flex: 1;
text {
margin-right: $margin/2;
padding-left: 10rpx;
font-size: 60%;
padding-bottom: 4rpx;
}
.kucun {
color: $text-gray;
font-weight: normal;
}
}
}
}
}
}
.apply-number {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
background-color: #fff;
padding: $padding;
border-radius: 0 0 30rpx 30rpx;
.apply-number-title {
font-size: 30rpx;
font-weight: bold;
text {
font-size: 26rpx;
color: grey;
font-weight: normal;
}
}
}
.block {
background: white;
margin: $margin;
border-radius: $radius - 10;
}
// 订单信息
.info-box {
.info-item {
position: relative;
padding: 40rpx $padding 40rpx 200rpx;
font-size: $title-size-m;
min-height: 40rpx;
text-align: right;
.radio {
font-size: 28rpx;
font-weight: bold;
}
.label {
position: absolute;
left: 40rpx;
top: 40rpx;
color: $text-gray;
}
.info-textarea {
height: 120rpx;
width: 100%;
text-align: left;
font-size: $title-size-m;
}
.info-textarea-m {
height: 120rpx;
width: 100%;
text-align: left;
font-size: 60rpx;
font-weight: bold;
}
&::after {
position: absolute;
left: $margin;
right: $margin;
content: " ";
height: 1rpx;
bottom: 0;
background: $border-color;
}
&:last-child::after {
display: none;
}
.info-item-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 28rpx;
font-weight: bold;
.icons {
padding-top: 2rpx;
font-weight: normal;
margin-left: 10rpx;
}
}
}
}
</style>

View File

@@ -4,12 +4,12 @@
<view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view> <view class="service"> 本次售后服务将由<span>DT生态平台</span>为您提供服务 </view>
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<view class="goods-item" @click="onGoods(goodsInfo.goods_id)"> <view class="goods-item">
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" /> <image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<view class="item--content"> <view class="item--content">
<view class="title">{{goodsInfo.name}}</view> <view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title">{{goodsInfo.shop.name}}</view> <view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class="price">{{goodsInfo.price.price_min || '0'}} <view class="price">{{goodsInfo.price || '0'}}
<view class="price-type"> <view class="price-type">
<text> DT积分</text> <text> DT积分</text>
</view> </view>
@@ -19,28 +19,30 @@
<!-- 申请数量 --> <!-- 申请数量 -->
<view class="apply-number"> <view class="apply-number">
<view class="apply-number-title"> <view class="apply-number-title">
申请数量<text>最多可申请3</text> 申请数量<text>最多可申请{{goodsInfo.qty}}</text>
</view> </view>
<uni-section title="设置最小值和最大值" subTitle="使用 min \ max 属性设置最大最小值" type="line" padding> <uni-section type="line" padding>
<uni-number-box :min="1" :max="9" /> <uni-number-box :value="goodsInfo.qty" :disabled="true" />
</uni-section> </uni-section>
</view> </view>
<!-- 退货方式 --> <!-- 退货方式 -->
<view class="block info-box"> <view class="block info-box">
<view class="info-item"> <view class="info-item">
<view class="label">申请原因</view> <view class="label">申请原因</view>
<view class="nowrap info-item-title" @click="changeReason">请选择申请原因 <view class="nowrap info-item-title" @click="changeReason">{{ttext}}
<uni-icons class="icons" type="more-filled" color="grey" /> <uni-icons class="icons" type="more-filled" color="grey" />
</view> </view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="label">商品状态</view> <view class="label">商品状态</view>
<view class="nowrap"> <view class="nowrap">
<label class="radio "> <label class="radio" @click="radioValue = 'r1'">
<radio value="r1" color="#34CE98" checked="true" style="transform:scale(0.7)" />已破损 <radio value="r1" color="#34CE98" :checked="radioValue === 'r1'" style="transform:scale(0.7)" />
已破损
</label> </label>
<label class="radio " style="padding-left: 20rpx;"> <label class="radio " @click="radioValue = 'r2'" style="padding-left: 20rpx;">
<radio value="r2" color="#34CE98" style="transform:scale(0.7)" />未破损 <radio value="r2" color="#34CE98" :checked="radioValue === 'r2'" style="transform:scale(0.7)" />
未破损
</label> </label>
</view> </view>
</view> </view>
@@ -50,69 +52,114 @@
</view> </view>
</view> </view>
<view class=" applyBtn">申请{{this.type === 'refund'?'退货':'换货'}}</view> <view class="block info-box">
<view class="info-item">
<view class="label">联系电话</view>
<view class="nowrap info-item-title">{{tel}}</view>
</view>
</view>
<view class="applyBtn" @click="refund(id,'post')">申请{{this.type === 'refund'?'退货':'换货'}}</view>
</view> </view>
</template> </template>
<script> <script>
import eventBus from '../../utils/eventBus.js';
import {
refund
} from '@/apis/interfaces/order.js'
export default { export default {
data() { data() {
return { return {
remark: '', remark: '',
type: '', type: '',
goodsInfo: { id: '',
"goods_id": 56, title: [],
"shop": { ttext: '请选择申请原因',
"shop_id": 1, tel: '',
"name": "平台自营店铺", goodsInfo: {},
"cover": "", radioValue: ''
"is_self": true
},
"is_self": true,
"name": "铜锣烧蛋糕铜锣烧蛋糕铜锣烧蛋糕",
"description": "口感丰富,悠闲小食",
"cover": "https://gl-ecological.oss-cn-zhangjiakou.aliyuncs.com/images/2022/06/08/0dcb67738c93b2e1c8a489d8ac39266e.png",
"tags": [],
"original_price": 155,
"price": {
"show": "100",
"score": 1,
"price_min": 100,
"price_max": 100
},
"clicks": 0,
"sales": 7394
},
} }
}, },
onLoad() { onLoad() {
let type = this.$Route.query.type; let type = this.$Route.query.type;
let title = ''; let title = '';
if(type === 'refund'){ if (type === 'refund') {
title = '退货申请' title = '退货申请'
} else{ } else {
title = '换货申请' title = '换货申请'
} }
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title:title title: title
}) })
this.type = this.$Route.query.type; this.type = this.$Route.query.type;
this.id = this.$Route.query.id;
this.refund(this.$Route.query.id, 'get');
}, },
methods: { methods: {
refund(id, method) {
let params = {};
if (method === 'post') {
params = {
title: this.ttext,
remark: this.remark,
pictures: [],
type: this.type === 'refund' ? 2 : 3,
};
if (this.ttext === '请选择申请原因') {
uni.showToast({
title: '请选择申请原因',
icon: 'none',
mask: true,
})
return;
}
}
refund(this.$Route.query.id, method, params).then(res => {
if (method === 'get') {
this.title = res.title;
this.money = res.order.amount;
this.tel = res.user.username;
this.goodsInfo = res.order.items[0].sku;
this.goodsInfo.shop = res.order.shop;
this.goodsInfo.qty = res.order.items[0].qty;
} else {
uni.showToast({
title: '申请退货成功, 请去退换货中查看订单',
icon: 'none',
mask: true,
duration: 3000,
})
setTimeout(() => {
eventBus.$emit('applyRefundMoney', this.$Route.query.id, );
uni.navigateBack({
delta: 2
})
}, 3000)
}
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
})
})
},
changeReason() { changeReason() {
uni.showActionSheet({ uni.showActionSheet({
title: '选择'+this.type === 'refund'?' 退货':'换货'+'原因', title: '选择申请原因',
itemList: ['A', 'B', 'C'], itemList: this.title,
success: function(res) { success: (res) => {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); this.ttext = this.title[res.tapIndex]
}, },
fail: function(res) { fail: (res) => {
console.log(res.errMsg); console.log(res.errMsg);
} }
}); });
} },
} }
} }
</script> </script>
@@ -326,4 +373,74 @@
} }
} }
} }
// 订单信息
.info-box {
.info-item {
position: relative;
padding: 40rpx $padding 40rpx 200rpx;
font-size: $title-size-m;
min-height: 40rpx;
text-align: right;
.radio {
font-size: 28rpx;
font-weight: bold;
}
.label {
position: absolute;
left: 40rpx;
top: 40rpx;
color: $text-gray;
}
.info-textarea {
height: 120rpx;
width: 100%;
text-align: left;
font-size: $title-size-m;
}
.info-textarea-m {
height: 120rpx;
width: 100%;
text-align: left;
font-size: 60rpx;
font-weight: bold;
}
&::after {
position: absolute;
left: $margin;
right: $margin;
content: " ";
height: 1rpx;
bottom: 0;
background: $border-color;
}
&:last-child::after {
display: none;
}
.info-item-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
font-size: 28rpx;
font-weight: bold;
.icons {
padding-top: 2rpx;
font-weight: normal;
margin-left: 10rpx;
}
}
}
}
</style> </style>

View File

@@ -27,7 +27,7 @@
<!-- 店铺信息 --> <!-- 店铺信息 -->
<view class="shopInfo" @click="toShop(2)" v-if="goods.shop"> <view class="shopInfo" @click="toShop(2)" v-if="goods.shop">
<view class="shopInfo-title-left"> <view class="shopInfo-title-left">
<image class="shop-logo" src="../../static/img/house_back.jpg" mode="aspectFill" /> <image class="shop-logo" :src="goods.shop.cover" mode="aspectFill" />
<view class="shop-title"> <view class="shop-title">
<view class="shop-titl" >{{goods.shop.name}}</view> <view class="shop-titl" >{{goods.shop.name}}</view>
<view> 商品质量:<span class='no'>5.0</span> <text style="padding-left: 20rpx;">服务态度:<span class='no'>5.0</span></text> </view> <view> 商品质量:<span class='no'>5.0</span> <text style="padding-left: 20rpx;">服务态度:<span class='no'>5.0</span></text> </view>

View File

@@ -77,7 +77,7 @@
<image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix" />
<view class="title">待收货</view> <view class="title">待收货</view>
</view> </view>
<view class="order-box-item" @click="onBtn('OrderRefund', { index: 0 })"> <view class="order-box-item" @click="onBtn('OrderRefund')">
<image class="icon" src="@/static/user/order_icon_05.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_05.png" mode="widthFix" />
<view class="title">退换货</view> <view class="title">退换货</view>
</view> </view>

BIN
static/icon/goods_row.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

BIN
static/icon/icon-back.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/icon/icon-money.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/icon/reset-info.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 866 B

View File

@@ -2,19 +2,26 @@
<view> <view>
<view class="order--content" :class="[pattern ? 'chunk': 'broad']"> <view class="order--content" :class="[pattern ? 'chunk': 'broad']">
<block v-if="!stores"> <block v-if="!stores">
<view class="order--header"> <view class="order--group--header" @click="$emit('onBtn', {type: 'shopsDetail', order: orderInfo})">
<view class="order--no"> <image class="logo" v-if="orderInfo.shop.cover != ''" :src="orderInfo.shop.cover" mode="aspectFill"></image>
订单号{{orderInfo.no}} <view class="store">
{{orderInfo.shop.name}} <uni-icons type="right" size="16" color="#666" />
</view> </view>
<view class="stateText" :style="{color: stateColor}"> <view class="stateText" :style="{color: stateColor}">
{{orderInfo.stateText}} {{orderInfo.stateText}}
</view> </view>
</view> </view>
<view class="order--flex">
<view class="order--header">
<view class="order--no">
订单号{{orderInfo.no}}
</view>
</view>
<view class="order--flex" @click="$emit('onBtn', {type: 'goodsDetail', order: orderInfo})">
<image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image> <image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image>
<view class="order--title">{{orderInfo.name}}</view> <view class="order--title">{{orderInfo.name}}</view>
<view class="order--count"> <view class="order--count">
<view class="order--price"><text></text>{{orderInfo.price}}</view> <view class="order--price">{{orderInfo.price}}<text>DT积分</text></view>
<view class="order--sum">{{orderInfo.sum}}</view> <view class="order--sum">{{orderInfo.sum}}</view>
</view> </view>
</view> </view>
@@ -34,18 +41,17 @@
<image class="order--cover" :src="storeItem.cover" mode="aspectFill"></image> <image class="order--cover" :src="storeItem.cover" mode="aspectFill"></image>
<view class="order--title">{{storeItem.name}}</view> <view class="order--title">{{storeItem.name}}</view>
<view class="order--count"> <view class="order--count">
<view class="order--price"><text></text>{{storeItem.price}}</view> <view class="order--price">{{storeItem.price}}<text>DT积分</text></view>
<view class="order--sum">{{storeItem.sum}}</view> <view class="order--sum"> X {{storeItem.sum}} </view>
</view> </view>
</view> </view>
</view> </view>
</block> </block>
<slot name="btns" v-if="orderInfo.cans"> <slot name="btns" v-if="orderInfo.cans">
<view class="order--btns"> <view class="order--btns">
<!-- <block v-for="(btnItem, btnIndex) in orderBtns" :key="btnIndex">
<view class="item" @click="$emit('onBtn', {type: btnItem.type, order: orderInfo})" :style="btnItem.style">{{btnItem.text}}</view>
</block> -->
<view v-show="orderInfo.cans.cancel" class="item item--cancel" @click="$emit('onBtn', {type: 'cancel', order: orderInfo})">取消订单</view> <view v-show="orderInfo.cans.cancel" class="item item--cancel" @click="$emit('onBtn', {type: 'cancel', order: orderInfo})">取消订单</view>
<view v-show="orderInfo.cans.refund_money" class="item item--cancel" @click="$emit('onBtn', {type: 'refundMoney', order: orderInfo})">申请退款</view>
<view v-show="orderInfo.cans.refund" class="item item--cancel" @click="$emit('onBtn', {type: 'refund', order: orderInfo})">申请售后</view>
<view v-show="orderInfo.cans.delete" class="item item--delete" @click="$emit('onBtn', {type: 'delete', order: orderInfo})">删除订单</view> <view v-show="orderInfo.cans.delete" class="item item--delete" @click="$emit('onBtn', {type: 'delete', order: orderInfo})">删除订单</view>
<view v-show="orderInfo.cans.logistic_show" class="item item--logistic" @click="$emit('onBtn', {type: 'logistic', order: orderInfo})">查看物流</view> <view v-show="orderInfo.cans.logistic_show" class="item item--logistic" @click="$emit('onBtn', {type: 'logistic', order: orderInfo})">查看物流</view>
<view v-show="orderInfo.cans.pay" class="item item--pay" @click="$emit('onBtn', {type: 'pay', order: orderInfo})">立即支付</view> <view v-show="orderInfo.cans.pay" class="item item--pay" @click="$emit('onBtn', {type: 'pay', order: orderInfo})">立即支付</view>
@@ -135,17 +141,20 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: $margin; padding-bottom: $margin;
border-top: solid 1rpx #f9f9f9;
align-items: center; align-items: center;
& > .order--no{ & > .order--no{
flex: 1; flex: 1;
margin-right: $margin; margin-right: $margin;
font-size: 28rpx; font-size: 26rpx;
line-height: 40rpx; line-height: 40rpx;
color: #555; color: #555;
@extend .text-nowrap; @extend .text-nowrap;
padding-top: 10rpx;
} }
&> .stateText{ &> .stateText{
font-size: 26rpx; font-size: 26rpx;
color: $text-price;
} }
} }
.order--flex{ .order--flex{
@@ -168,11 +177,14 @@
text-align: right; text-align: right;
padding-left: $margin; padding-left: $margin;
line-height: 40rpx; line-height: 40rpx;
// color: $text-price;
.order--price{ .order--price{
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
&>text{ &>text{
font-size: 24rpx; font-size: 24rpx;
font-weight: normal;
padding-left: 10rpx;
} }
} }
.order--sum{ .order--sum{
@@ -213,6 +225,37 @@
} }
} }
} }
.order--group--header{
padding-bottom: $margin;
display: flex;
justify-content: space-between;
align-items: center;
&> .logo{
width: 38rpx;
height: 38rpx;
vertical-align: middle;
margin-right: $margin/2;
}
&> .store{
@extend .text-nowrap;
flex: 1;
margin-right: $margin;
font-size: 28rpx;
line-height: 40rpx;
color: #555;
}
&> .stateText{
font-size: 26rpx;
}
}
.order--group--flex{
@extend .order--flex;
margin-bottom: $margin - 10;
&:last-child{
margin: 0;
}
}
.order--btns{ .order--btns{
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

View File

@@ -0,0 +1,16 @@
## 1.1.12021-11-22
- 修复 vue3中某些scss变量无法找到的问题
## 1.1.02021-11-19
- 优化 组件UI并提供设计资源详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-steps](https://uniapp.dcloud.io/component/uniui/uni-steps)
## 1.0.82021-05-12
- 新增 项目示例地址
## 1.0.72021-05-06
- 修复 uni-steps 横向布局时,多行文字高度不合理的 bug
## 1.0.62021-04-21
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 1.0.52021-02-05
- 优化 组件引用关系通过uni_modules引用组件
## 1.0.42021-02-05
- 调整为uni_modules目录规范

View File

@@ -0,0 +1,270 @@
<template>
<view class="uni-steps">
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
<view v-for="(item,index) in options" :key="index"
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
<text :style="{color:index === active?activeColor:deactiveColor}"
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
<text :style="{color: deactiveColor}"
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
</view>
</view>
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
v-for="(item,index) in options" :key="index">
<view
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
</view>
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
v-if="index === active">
<uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
</view>
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
:style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
<view
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* Steps 步骤条
* @description 评分组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=34
* @property {Number} active 当前步骤
* @property {String} direction = [row|column] 当前步骤
* @value row 横向
* @value column 纵向
* @property {String} activeColor 选中状态的颜色
* @property {Array} options 数据源,格式为:[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
*/
export default {
name: 'UniSteps',
props: {
direction: {
// 排列方向 row column
type: String,
default: 'row'
},
activeColor: {
// 激活状态颜色
type: String,
default: '#2979FF'
},
deactiveColor: {
// 未激活状态颜色
type: String,
default: '#fff'
},
active: {
// 当前步骤
type: Number,
default: 0
},
activeIcon: {
// 当前步骤
type: String,
default: 'checkbox-filled'
},
options: {
type: Array,
default () {
return []
}
} // 数据
},
data() {
return {}
}
}
</script>
<style lang="scss">
$uni-primary: #2979ff !default;
$uni-border-color:#EDEDED;
.uni-steps {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
flex-direction: column;
}
.uni-steps__row {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-steps__column {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row-reverse;
}
.uni-steps__row-text-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: flex-end;
margin-bottom: 8px;
}
.uni-steps__column-text-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
}
.uni-steps__row-text {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
flex: 1;
flex-direction: column;
}
.uni-steps__column-text {
padding: 6px 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: $uni-border-color;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-steps__row-title {
font-size: 28rpx;
line-height: 16px;
text-align: center;
font-weight: bold;
}
.uni-steps__column-title {
font-size: 14px;
text-align: left;
line-height: 18px;
}
.uni-steps__row-desc {
font-size: 12px;
line-height: 14px;
text-align: center;
}
.uni-steps__column-desc {
font-size: 12px;
text-align: left;
line-height: 18px;
}
.uni-steps__row-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-steps__column-container {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
width: 30px;
flex-direction: column;
}
.uni-steps__row-line-item {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
flex-direction: row;
flex: 1;
height: 14px;
line-height: 14px;
align-items: center;
justify-content: center;
}
.uni-steps__column-line-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
.uni-steps__row-line {
flex: 1;
height: 1px;
background-color: #B7BDC6;
}
.uni-steps__column-line {
width: 1px;
background-color: #B7BDC6;
}
.uni-steps__row-line--after {
transform: translateX(1px);
}
.uni-steps__column-line--after {
flex: 1;
transform: translate(0px, 1px);
}
.uni-steps__row-line--before {
transform: translateX(-1px);
}
.uni-steps__column-line--before {
height: 6px;
transform: translate(0px, -13px);
}
.uni-steps__row-circle {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #B7BDC6;
margin: 0px 3px;
}
.uni-steps__column-circle {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #B7BDC6;
margin: 4px 0px 5px 0px;
}
.uni-steps__row-check {
margin: 0px 6px;
}
.uni-steps__column-check {
height: 14px;
line-height: 14px;
margin: 2px 0px;
}
</style>

View File

@@ -0,0 +1,89 @@
{
"id": "uni-steps",
"displayName": "uni-steps 步骤条",
"version": "1.1.1",
"description": "步骤条组件,提供横向和纵向两种布局格式。",
"keywords": [
"uni-ui",
"uniui",
"步骤条",
"时间轴"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

View File

@@ -0,0 +1,13 @@
## Steps 步骤条
> **组件名uni-steps**
> 代码块: `uSteps`
步骤条,常用于显示进度
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-steps)
#### 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 866 B

7
utils/eventBus.js Normal file
View File

@@ -0,0 +1,7 @@
import Vue from 'vue'
/**
* 定义空的vue实例作为 goBackEntity实现非父子组件之间的通信(vue2.x中去掉了broadcast)
*/
var goBackEntity = new Vue({});
export default goBackEntity;