453530270@qq.com
3 years ago
50 changed files with 0 additions and 10178 deletions
@ -1,11 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'article.category/list' |
|
||||
} |
|
||||
|
|
||||
// 页面数据
|
|
||||
export function list() { |
|
||||
return request.get(api.list) |
|
||||
} |
|
||||
@ -1,17 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'article/list', |
|
||||
detail: 'article/detail' |
|
||||
} |
|
||||
|
|
||||
// 文章列表
|
|
||||
export function list(param, option) { |
|
||||
return request.get(api.list, param, option) |
|
||||
} |
|
||||
|
|
||||
// 文章详情
|
|
||||
export function detail(articleId) { |
|
||||
return request.get(api.detail, { articleId }) |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'balance.log/list' |
|
||||
} |
|
||||
|
|
||||
// 余额账单明细
|
|
||||
export const list = (param) => { |
|
||||
return request.get(api.list, param) |
|
||||
} |
|
||||
@ -1,35 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'cart/list', |
|
||||
total: 'cart/total', |
|
||||
add: 'cart/add', |
|
||||
update: 'cart/update', |
|
||||
clear: 'cart/clear' |
|
||||
} |
|
||||
|
|
||||
// 购物车列表
|
|
||||
export const list = () => { |
|
||||
return request.get(api.list, {}, { load: false }) |
|
||||
} |
|
||||
|
|
||||
// 购物车商品总数量
|
|
||||
export const total = () => { |
|
||||
return request.get(api.total, {}, { load: false }) |
|
||||
} |
|
||||
|
|
||||
// 加入购物车
|
|
||||
export const add = (goodsId, goodsSkuId, goodsNum) => { |
|
||||
return request.post(api.add, { goodsId, goodsSkuId, goodsNum }) |
|
||||
} |
|
||||
|
|
||||
// 更新购物车商品数量
|
|
||||
export const update = (goodsId, goodsSkuId, goodsNum) => { |
|
||||
return request.post(api.update, { goodsId, goodsSkuId, goodsNum }, { isPrompt: false }) |
|
||||
} |
|
||||
|
|
||||
// 删除购物车中指定记录
|
|
||||
export const clear = (cartIds = []) => { |
|
||||
return request.post(api.clear, { cartIds }) |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'category/list' |
|
||||
} |
|
||||
|
|
||||
// 页面数据
|
|
||||
export function list() { |
|
||||
return request.get(api.list) |
|
||||
} |
|
||||
@ -1,19 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
order: 'checkout/order', |
|
||||
submit: 'checkout/submit', |
|
||||
} |
|
||||
|
|
||||
// mode: 结算模式 (buyNow立即购买 cart购物车)
|
|
||||
|
|
||||
// 结算台订单信息
|
|
||||
export const order = (mode, param) => { |
|
||||
return request.get(api.order, { mode, ...param }) |
|
||||
} |
|
||||
|
|
||||
// 结算台订单提交
|
|
||||
export const submit = (mode, data) => { |
|
||||
return request.post(api.submit, { mode, ...data }) |
|
||||
} |
|
||||
@ -1,23 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'comment/list', |
|
||||
listRows: 'comment/listRows', |
|
||||
total: 'comment/total' |
|
||||
} |
|
||||
|
|
||||
// 商品评价列表
|
|
||||
export const list = (goodsId, param, option) => { |
|
||||
return request.get(api.list, { ...param, goodsId }, option) |
|
||||
} |
|
||||
|
|
||||
// 商品评价列表 (限制数量, 用于商品详情页展示)
|
|
||||
export const listRows = (goodsId, limit = 5) => { |
|
||||
return request.get(api.listRows, { goodsId, limit }) |
|
||||
} |
|
||||
|
|
||||
// 商品评分总数
|
|
||||
export const total = (goodsId) => { |
|
||||
return request.get(api.total, { goodsId }) |
|
||||
} |
|
||||
@ -1,16 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'coupon/list' |
|
||||
} |
|
||||
|
|
||||
// 优惠券列表
|
|
||||
export const list = (param, option) => { |
|
||||
const options = { |
|
||||
isPrompt: true, //（默认 true 说明：本接口抛出的错误是否提示）
|
|
||||
load: true, //（默认 true 说明：本接口是否提示加载动画）
|
|
||||
...option |
|
||||
} |
|
||||
return request.get(api.list, param, options) |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'express/list' |
|
||||
} |
|
||||
|
|
||||
// 物流公司列表
|
|
||||
export const list = (param) => { |
|
||||
return request.get(api.list, param) |
|
||||
} |
|
||||
@ -1,23 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'goods/list', |
|
||||
detail: 'goods/detail', |
|
||||
specData: 'goods/specData' |
|
||||
} |
|
||||
|
|
||||
// 商品列表
|
|
||||
export const list = param => { |
|
||||
return request.get(api.list, param) |
|
||||
} |
|
||||
|
|
||||
// 商品详情
|
|
||||
export const detail = goodsId => { |
|
||||
return request.get(api.detail, { goodsId }) |
|
||||
} |
|
||||
|
|
||||
// 获取商品规格数据
|
|
||||
export const specData = (goodsId) => { |
|
||||
return request.get(api.specData, { goodsId }) |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'goods.service/list' |
|
||||
} |
|
||||
|
|
||||
// 商品评价列表
|
|
||||
export function list(goodsId) { |
|
||||
return request.get(api.list, { goodsId }) |
|
||||
} |
|
||||
@ -1,22 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'myCoupon/list', |
|
||||
receive: 'myCoupon/receive' |
|
||||
} |
|
||||
|
|
||||
// 我的优惠券列表
|
|
||||
export const list = (param, option) => { |
|
||||
const options = { |
|
||||
isPrompt: true, //（默认 true 说明：本接口抛出的错误是否提示）
|
|
||||
load: true, //（默认 true 说明：本接口是否提示加载动画）
|
|
||||
...option |
|
||||
} |
|
||||
return request.get(api.list, param, options) |
|
||||
} |
|
||||
|
|
||||
// 领取优惠券
|
|
||||
export const receive = (couponId, data) => { |
|
||||
return request.post(api.receive, { couponId, ...couponId, data }) |
|
||||
} |
|
||||
@ -1,47 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
todoCounts: 'order/todoCounts', |
|
||||
list: 'order/list', |
|
||||
detail: 'order/detail', |
|
||||
express: 'order/express', |
|
||||
cancel: 'order/cancel', |
|
||||
receipt: 'order/receipt', |
|
||||
pay: 'order/pay' |
|
||||
} |
|
||||
|
|
||||
// 当前用户待处理的订单数量
|
|
||||
export function todoCounts(param, option) { |
|
||||
return request.get(api.todoCounts, param, option) |
|
||||
} |
|
||||
|
|
||||
// 我的订单列表
|
|
||||
export function list(param, option) { |
|
||||
return request.get(api.list, param, option) |
|
||||
} |
|
||||
|
|
||||
// 订单详情
|
|
||||
export function detail(orderId, param) { |
|
||||
return request.get(api.detail, { orderId, ...param }) |
|
||||
} |
|
||||
|
|
||||
// 获取物流信息
|
|
||||
export function express(orderId, param) { |
|
||||
return request.get(api.express, { orderId, ...param }) |
|
||||
} |
|
||||
|
|
||||
// 取消订单
|
|
||||
export function cancel(orderId, data) { |
|
||||
return request.post(api.cancel, { orderId, ...data }) |
|
||||
} |
|
||||
|
|
||||
// 确认收货
|
|
||||
export function receipt(orderId, data) { |
|
||||
return request.post(api.receipt, { orderId, ...data }) |
|
||||
} |
|
||||
|
|
||||
// 立即支付
|
|
||||
export function pay(orderId, payType, param) { |
|
||||
return request.get(api.pay, { orderId, payType, ...param }) |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'recharge.order/list' |
|
||||
} |
|
||||
|
|
||||
// 我的充值记录列表
|
|
||||
export const list = (param) => { |
|
||||
return request.get(api.list, param) |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'recharge.plan/list' |
|
||||
} |
|
||||
|
|
||||
// 充值套餐列表
|
|
||||
export const list = (param) => { |
|
||||
return request.get(api.list, param) |
|
||||
} |
|
||||
@ -1,35 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
list: 'refund/list', |
|
||||
goods: 'refund/goods', |
|
||||
apply: 'refund/apply', |
|
||||
detail: 'refund/detail', |
|
||||
delivery: 'refund/delivery' |
|
||||
} |
|
||||
|
|
||||
// 售后单列表
|
|
||||
export const list = (param, option) => { |
|
||||
return request.get(api.list, param, option) |
|
||||
} |
|
||||
|
|
||||
// 订单商品详情
|
|
||||
export const goods = (orderGoodsId, param) => { |
|
||||
return request.get(api.goods, { orderGoodsId, ...param }) |
|
||||
} |
|
||||
|
|
||||
// 申请售后
|
|
||||
export const apply = (orderGoodsId, data) => { |
|
||||
return request.post(api.apply, { orderGoodsId, form: data }) |
|
||||
} |
|
||||
|
|
||||
// 售后单详情
|
|
||||
export const detail = (orderRefundId, param) => { |
|
||||
return request.get(api.detail, { orderRefundId, ...param }) |
|
||||
} |
|
||||
|
|
||||
// 用户发货
|
|
||||
export const delivery = (orderRefundId, data) => { |
|
||||
return request.post(api.delivery, { orderRefundId, form: data }) |
|
||||
} |
|
||||
@ -1,18 +0,0 @@ |
|||||
import request from '@/utils/request' |
|
||||
|
|
||||
// api地址
|
|
||||
const api = { |
|
||||
image: 'upload/image' |
|
||||
} |
|
||||
|
|
||||
// 图片上传
|
|
||||
export const image = files => { |
|
||||
// 文件上传大小, 2M
|
|
||||
const maxSize = 1024 * 1024 * 2 |
|
||||
// 执行上传
|
|
||||
return new Promise((resolve, reject) => { |
|
||||
request.urlFileUpload({ files, maxSize }) |
|
||||
.then(result => resolve(result.map(item => item.data.fileInfo.file_id), result)) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
} |
|
||||
@ -1,331 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 打卡日历页面 --> |
|
||||
<view class='all'> |
|
||||
<view class="bar"> |
|
||||
<!-- 上一个月 --> |
|
||||
<view class="previous" @click="handleCalendar(0)"> |
|
||||
<button class="barbtn">上一月</button> |
|
||||
</view> |
|
||||
<!-- 显示年月 --> |
|
||||
<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view> |
|
||||
<!-- 下一个月 --> |
|
||||
<view class="next" @click="handleCalendar(1)"> |
|
||||
<button class="barbtn">下一月</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 显示星期 --> |
|
||||
<view class="week"> |
|
||||
<view class="week_ri" v-for="(item,index) in weeks_ch" :key="index">{{item}}</view> |
|
||||
</view> |
|
||||
<view class="myDateTable"> |
|
||||
<view v-for="(item,j) in days" :key="j" class='dateCell'> |
|
||||
<view v-if="item.date==undefined || item.date == null" class='cell'> |
|
||||
<text :decode="true"> </text> |
|
||||
</view> |
|
||||
<view v-else @click="clickSignUp(item.date)"> |
|
||||
<!-- 已订餐到日期 --> |
|
||||
<view v-if="item.isSign == 5" class='cell yellow' style="background: #0000a8;color: #ffffff;"> |
|
||||
<text>{{item.date}}</text> |
|
||||
</view> |
|
||||
<view class="cell white bg-red" style="background: #0000e7;color: #ffffff;" v-else-if="item.isSign == 2"> |
|
||||
<text>{{item.date}}</text> |
|
||||
</view> |
|
||||
<!-- 点击的日期 --> |
|
||||
<view class="cell white bg-red" style="background: #ffaa7f;color: #ffffff;" v-else-if="item.isSign == 3"> |
|
||||
<text>{{item.date}}</text> |
|
||||
</view> |
|
||||
<!-- 今天的日期 --> |
|
||||
<view v-else-if="item.date == today" class='cell yellow curday' style="color: #fa2299;">{{item.date}}</view> |
|
||||
<!-- 当前日期之后 --> |
|
||||
<view class="whiteColor cell" v-else> |
|
||||
<text>{{item.date}}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 活动列表 --> |
|
||||
<view class="actlist"> |
|
||||
<view class="act-item"> |
|
||||
<view class="act-title">五月端午，邀你去踏青</view> |
|
||||
<view class="act-desc">端午时节，踏青开始</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="act-item"> |
|
||||
<view class="act-title">五月端午，邀你去踏青</view> |
|
||||
<view class="act-desc">端午时节，踏青开始</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="act-item"> |
|
||||
<view class="act-title">五月端午，邀你去踏青</view> |
|
||||
<view class="act-desc">端午时节，踏青开始</view> |
|
||||
</view> |
|
||||
|
|
||||
|
|
||||
|
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
days: [],//日历 |
|
||||
SignUp: [{'type':1,t:1},{'type':2,t:10}],//已经订餐 |
|
||||
cur_year: 0, //当前选的年 |
|
||||
cur_month: 0, //当前选的月 |
|
||||
today: parseInt(new Date().getDate()), //今天 |
|
||||
toMonth: parseInt(new Date().getMonth() + 1), //本月 |
|
||||
toYear: parseInt(new Date().getFullYear()), //本年 |
|
||||
weeks_ch: ['日', '一', '二', '三', '四', '五', '六'], |
|
||||
}; |
|
||||
}, |
|
||||
props: { |
|
||||
//年 |
|
||||
sendYear: { |
|
||||
type: Number, |
|
||||
default: new Date().getFullYear() |
|
||||
}, |
|
||||
//月 |
|
||||
sendMonth: { |
|
||||
type: Number, |
|
||||
default: new Date().getMonth() + 1 |
|
||||
}, |
|
||||
}, |
|
||||
created() { |
|
||||
this.cur_year = this.sendYear;//年 |
|
||||
this.cur_month = this.sendMonth;//月 |
|
||||
this.calculateEmptyGrids(this.cur_year, this.cur_month); |
|
||||
this.calculateDays(this.cur_year, this.cur_month); |
|
||||
//网络请求 |
|
||||
this.onJudgeSign(this.SignUp); |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获取当月共多少天 |
|
||||
getThisMonthDays(year, month) { |
|
||||
return new Date(year, month, 0).getDate() |
|
||||
}, |
|
||||
// 获取当月第一天星期几 |
|
||||
getFirstDayOfWeek(year, month) { |
|
||||
return new Date(Date.UTC(year, month - 1, 1)).getDay(); |
|
||||
}, |
|
||||
// 计算当月1号前空了几个格子，把它填充在days数组的前面 |
|
||||
calculateEmptyGrids(year, month) { |
|
||||
//计算每个月时要清零 |
|
||||
this.days = []; |
|
||||
const firstDayOfWeek = this.getFirstDayOfWeek(year, month); |
|
||||
if (firstDayOfWeek > 0) { |
|
||||
for (let i = 0; i < firstDayOfWeek; i++) { |
|
||||
var obj = { |
|
||||
date: null, |
|
||||
isSign: false |
|
||||
} |
|
||||
this.days.push(obj); |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
// 绘制当月天数占的格子，并把它放到days数组中 |
|
||||
calculateDays(year, month) { |
|
||||
const thisMonthDays = this.getThisMonthDays(year, month); |
|
||||
for (let i = 1; i <= thisMonthDays; i++) { |
|
||||
var obj = { |
|
||||
date: i, |
|
||||
isSign: false |
|
||||
} |
|
||||
this.days.push(obj); |
|
||||
} |
|
||||
//console.log(this.days); |
|
||||
}, |
|
||||
//匹配判断当月与当月哪些日子订餐 |
|
||||
onJudgeSign(date) { |
|
||||
var signs = date; |
|
||||
var daysArr = this.days; |
|
||||
//日期相同，订过餐 |
|
||||
for(var i=0;i<signs.length;i++){ |
|
||||
for (var j=0; j<daysArr.length;j++) { |
|
||||
if (daysArr[j].date == signs[i]['t']) { |
|
||||
if(signs[i]['type'] == 1){ |
|
||||
daysArr[j].isSign = 2;//订一餐 |
|
||||
}else{ |
|
||||
daysArr[j].isSign = 5;//订两餐 |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
this.days = daysArr; |
|
||||
}, |
|
||||
// 切换控制年月，上一个月，下一个月 |
|
||||
handleCalendar(type) { |
|
||||
const cur_year = parseInt(this.cur_year); |
|
||||
const cur_month = parseInt(this.cur_month); |
|
||||
var newMonth; |
|
||||
var newYear = cur_year; |
|
||||
if (type === 0) { //上个月 |
|
||||
newMonth = cur_month - 1; |
|
||||
if (newMonth < 1) { |
|
||||
newYear = cur_year - 1; |
|
||||
newMonth = 12; |
|
||||
} |
|
||||
} else { |
|
||||
newMonth = cur_month + 1; |
|
||||
if (newMonth > 12) { |
|
||||
newYear = cur_year + 1; |
|
||||
newMonth = 1; |
|
||||
} |
|
||||
} |
|
||||
this.calculateEmptyGrids(newYear, newMonth); |
|
||||
this.calculateDays(newYear, newMonth); |
|
||||
|
|
||||
//网络请求 |
|
||||
this.SignUp =[{'type':1,t:3},{'type':2,t:11}],//已经订餐 |
|
||||
this.onJudgeSign(this.SignUp); |
|
||||
|
|
||||
this.cur_year = newYear; |
|
||||
this.cur_month = newMonth; |
|
||||
|
|
||||
// this.SignUp = []; //清空 |
|
||||
this.$emit('dateChange',this.cur_year+"-"+this.cur_month); //传给调用模板页面去拿新数据 |
|
||||
}, |
|
||||
//点击日期 |
|
||||
clickSignUp(t){ |
|
||||
// console.log(this.cur_year)//年 |
|
||||
// console.log(this.cur_month)//月 |
|
||||
var t = t;//点击的天 |
|
||||
|
|
||||
var signs = this.SignUp; |
|
||||
|
|
||||
var daysArr = this.days; |
|
||||
//日期相同，订过餐,点击的日期 |
|
||||
for(var i=0;i<signs.length;i++){ |
|
||||
for (var j=0; j<daysArr.length;j++) { |
|
||||
if (daysArr[j].date == signs[i]['t']) { |
|
||||
if(signs[i]['type'] == 1){ |
|
||||
daysArr[j].isSign = 2;//订一餐 |
|
||||
}else{ |
|
||||
daysArr[j].isSign = 5;//订两餐 |
|
||||
} |
|
||||
} |
|
||||
if(t == daysArr[j].date){ |
|
||||
daysArr[j].isSign = 3 |
|
||||
} |
|
||||
if(daysArr[j].isSign != 2 && t != daysArr[j].date && daysArr[j].isSign != 5){ |
|
||||
daysArr[j].isSign = 1; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
this.days = daysArr; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less" scoped> |
|
||||
|
|
||||
.all .bar { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
padding: 10rpx; |
|
||||
} |
|
||||
|
|
||||
.bar .barbtn { |
|
||||
height: 30px; |
|
||||
line-height: 30px; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
/* 星期 */ |
|
||||
.all .week { |
|
||||
display: flex; |
|
||||
/* flex-direction: row; */ |
|
||||
/* justify-content: space-between; */ |
|
||||
padding: 20rpx; |
|
||||
border-radius: 10px; |
|
||||
background-color: #fff; |
|
||||
width: 90%; |
|
||||
margin-left: 2%; |
|
||||
} |
|
||||
.week_ri{ |
|
||||
margin-left: 19rpx; |
|
||||
padding: 0 48rpx 0 0; |
|
||||
} |
|
||||
.myDateTable { |
|
||||
margin: 2.5vw; |
|
||||
border-radius: 10px; |
|
||||
background: #fff; |
|
||||
} |
|
||||
.myDateTable .dateCell { |
|
||||
width: 11vw; |
|
||||
padding: 1vw; |
|
||||
display: inline-block; |
|
||||
text-align: center; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
.dateCell .cell { |
|
||||
display: flex; |
|
||||
border-radius: 50%; |
|
||||
height: 9vw; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.greenColor { |
|
||||
color: #01b90b; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
|
|
||||
.bgWhite { |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
|
|
||||
.bgGray { |
|
||||
background-color: rgba(255, 255, 255, 0.42); |
|
||||
} |
|
||||
|
|
||||
.bgBlue { |
|
||||
font-size: 14px; |
|
||||
background-color: #4b95e6; |
|
||||
} |
|
||||
|
|
||||
.redColor { |
|
||||
color: #ff0000; |
|
||||
} |
|
||||
.curday{ |
|
||||
color: #fa2209; |
|
||||
font-size: 36rpx; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.TipArea{ |
|
||||
word-break:break-all; |
|
||||
word-wrap:break-word; |
|
||||
|
|
||||
font-size: 14px; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
.impTip{ |
|
||||
display: inline-block; |
|
||||
color: #ff0000; |
|
||||
} |
|
||||
|
|
||||
.actlist{ |
|
||||
padding: 10rpx; |
|
||||
|
|
||||
.act-item{ |
|
||||
padding:20rpx; |
|
||||
color: #333; |
|
||||
border-bottom: #ccc 1px solid; |
|
||||
margin-top: 20rpx; |
|
||||
background: #fff; |
|
||||
|
|
||||
.act-title{ |
|
||||
font-size: 36rpx; |
|
||||
line-height: 1.8; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,500 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<!-- 页面顶部 --> |
|
||||
<view v-if="list.length" class="head-info"> |
|
||||
<view class="cart-total"> |
|
||||
<text>共</text> |
|
||||
<text class="active">{{ total }}</text> |
|
||||
<text>件商品</text> |
|
||||
</view> |
|
||||
<view class="cart-edit" @click="handleToggleMode"> |
|
||||
<view v-if="mode == 'normal'" class="normal"> |
|
||||
<text class="icon iconfont icon-bianji"></text> |
|
||||
<text>编辑</text> |
|
||||
</view> |
|
||||
<view v-if="mode == 'edit'" class="edit"> |
|
||||
<text>完成</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 购物车商品列表 --> |
|
||||
<view v-if="list.length" class="cart-list"> |
|
||||
<view class="cart-item" v-for="(item, index) in list" :key="index"> |
|
||||
<label class="item-radio" @click.stop="handleCheckItem(item.id)"> |
|
||||
<radio class="radio" color="#fa2209" :checked="inArray(item.id, checkedIds)" /> |
|
||||
</label> |
|
||||
<view class="goods-image" @click="onTargetGoods(item.goods_id)"> |
|
||||
<image class="image" :src="item.goods.goods_image" mode="scaleToFill"></image> |
|
||||
</view> |
|
||||
<view class="item-content"> |
|
||||
<view class="goods-title" @click="onTargetGoods(item.goods_id)"> |
|
||||
<text class="twoline-hide">{{ item.goods.goods_name }}</text> |
|
||||
</view> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in item.goods.skuInfo.goods_props" :key="idx"> |
|
||||
<text>{{ props.value.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item-foot"> |
|
||||
<view class="goods-price"> |
|
||||
<text class="unit">￥</text> |
|
||||
<text class="value">{{ item.goods.skuInfo.goods_price }}</text> |
|
||||
</view> |
|
||||
<view class="stepper"> |
|
||||
<u-number-box :min="1" :value="item.goods_num" :step="1" @change="onChangeStepper($event, item)" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 购物车数据为空 --> |
|
||||
<empty v-if="!list.length" :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="您的购物车是空的, 快去逛逛吧"> |
|
||||
<view slot="slot" class="empty-ipt" @click="onTargetIndex"> |
|
||||
<text>去逛逛</text> |
|
||||
</view> |
|
||||
</empty> |
|
||||
<!-- 底部操作栏 --> |
|
||||
<view v-if="list.length" class="footer-fixed"> |
|
||||
<label class="all-radio" @click="handleCheckAll"> |
|
||||
<radio class="radio" color="#fa2209" :checked="checkedIds.length > 0 && checkedIds.length === list.length" /> |
|
||||
<text>全选</text> |
|
||||
</label> |
|
||||
<view class="total-info"> |
|
||||
<text>合计：</text> |
|
||||
<view class="goods-price"> |
|
||||
<text class="unit">￥</text> |
|
||||
<text class="value">{{ totalPrice }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="cart-action"> |
|
||||
<view class="btn-wrapper"> |
|
||||
<!-- dev:下面的disabled条件使用checkedIds.join方式判断 --> |
|
||||
<!-- dev:通常情况下vue项目使用checkedIds.length更合理, 但是length属性在微信小程序中不起作用 --> |
|
||||
<view v-if="mode == 'normal'" class="btn-item btn-main" :class="{ disabled: checkedIds.join() == '' }" @click="handleOrder()"> |
|
||||
<text>去结算 {{ checkedIds.length > 0 ? `(${checkedIds.length})` : '' }}</text> |
|
||||
</view> |
|
||||
<view v-if="mode == 'edit'" class="btn-item btn-main" :class="{ disabled: !checkedIds.length }" @click="handleDelete()"> |
|
||||
<text>删除</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { inArray, arrayIntersect, debounce } from '@/utils/util' |
|
||||
import { checkLogin, setCartTotalNum, setCartTabBadge } from '@/core/app' |
|
||||
import * as CartApi from '@/api/cart' |
|
||||
import Empty from '@/components/empty' |
|
||||
|
|
||||
const CartIdsIndex = 'CartIds' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Empty |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
inArray, |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 当前模式: normal正常 edit编辑 |
|
||||
mode: 'normal', |
|
||||
// 购物车商品列表 |
|
||||
list: [], |
|
||||
// 购物车商品总数量 |
|
||||
total: null, |
|
||||
// 选中的商品ID记录 |
|
||||
checkedIds: [], |
|
||||
// 选中的商品总金额 |
|
||||
totalPrice: '0.00' |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
// 监听选中的商品 |
|
||||
checkedIds: { |
|
||||
handler(val) { |
|
||||
// 计算合计金额 |
|
||||
this.onCalcTotalPrice() |
|
||||
// 记录到缓存中 |
|
||||
uni.setStorageSync(CartIdsIndex, val) |
|
||||
}, |
|
||||
immediate: false |
|
||||
}, |
|
||||
// 监听购物车商品总数量 |
|
||||
total(val) { |
|
||||
// 缓存并设置角标 |
|
||||
setCartTotalNum(val) |
|
||||
setCartTabBadge() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow(options) { |
|
||||
// 获取购物车商品列表 |
|
||||
checkLogin() ? this.getCartList() : this.isLoading = false |
|
||||
// 获取缓存中的选中记录 |
|
||||
this.checkedIds = uni.getStorageSync(CartIdsIndex) |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 计算合计金额 (根据选中的商品) |
|
||||
onCalcTotalPrice() { |
|
||||
const app = this |
|
||||
// 选中的商品记录 |
|
||||
const checkedList = app.list.filter(item => inArray(item.id, app.checkedIds)) |
|
||||
// 计算总金额 |
|
||||
let tempPrice = 0; |
|
||||
checkedList.forEach(item => { |
|
||||
// 商品单价, 为了方便计算先转换单位为分 (整数) |
|
||||
const unitPrice = item.goods.skuInfo.goods_price * 100 |
|
||||
tempPrice += unitPrice * item.goods_num |
|
||||
}) |
|
||||
app.totalPrice = (tempPrice / 100).toFixed(2) |
|
||||
}, |
|
||||
|
|
||||
// 获取购物车商品列表 |
|
||||
getCartList() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
CartApi.list() |
|
||||
.then(result => { |
|
||||
app.list = result.data.list |
|
||||
app.total = result.data.cartTotal |
|
||||
// 清除checkedIds中无效的ID |
|
||||
app.onClearInvalidId() |
|
||||
}) |
|
||||
.finally(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
// 清除checkedIds中无效的ID |
|
||||
onClearInvalidId() { |
|
||||
const app = this |
|
||||
const listIds = app.list.map(item => item.id) |
|
||||
app.checkedIds = arrayIntersect(listIds, app.checkedIds) |
|
||||
}, |
|
||||
|
|
||||
// 切换当前模式 |
|
||||
handleToggleMode() { |
|
||||
this.mode = this.mode == 'normal' ? 'edit' : 'normal' |
|
||||
}, |
|
||||
|
|
||||
// 监听步进器更改事件 |
|
||||
onChangeStepper({ value }, item) { |
|
||||
// 这里是组织首次启动时的执行 |
|
||||
if (item.goods_num == value) return |
|
||||
// 记录一个节流函数句柄 |
|
||||
if (!item.debounceHandle) { |
|
||||
item.oldValue = item.goods_num |
|
||||
item.debounceHandle = debounce(this.onUpdateCartNum, 500) |
|
||||
} |
|
||||
// 更新商品数量 |
|
||||
item.goods_num = value |
|
||||
// 提交更新购物车数量 (节流) |
|
||||
item.debounceHandle(item, item.oldValue, value) |
|
||||
}, |
|
||||
|
|
||||
// 提交更新购物车数量 |
|
||||
onUpdateCartNum(item, oldValue, newValue) { |
|
||||
const app = this |
|
||||
CartApi.update(item.goods_id, item.goods_sku_id, newValue) |
|
||||
.then(result => { |
|
||||
// 更新商品数量 |
|
||||
app.total = result.data.cartTotal |
|
||||
// 重新计算合计金额 |
|
||||
app.onCalcTotalPrice() |
|
||||
// 清除节流函数句柄 |
|
||||
item.debounceHandle = null |
|
||||
}) |
|
||||
.catch(err => { |
|
||||
// 还原商品数量 |
|
||||
item.goods_num = oldValue |
|
||||
setTimeout(() => app.$toast(err.errMsg), 10) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 跳转到商品详情页 |
|
||||
onTargetGoods(goodsId) { |
|
||||
this.$navTo('pages/goods/detail', { goodsId }) |
|
||||
}, |
|
||||
|
|
||||
// 点击去逛逛按钮, 跳转到首页 |
|
||||
onTargetIndex() { |
|
||||
this.$navTo('pages/index/index') |
|
||||
}, |
|
||||
|
|
||||
// 选中商品 |
|
||||
handleCheckItem(cartId) { |
|
||||
const { checkedIds } = this |
|
||||
const index = checkedIds.findIndex(id => id === cartId) |
|
||||
index < 0 ? checkedIds.push(cartId) : checkedIds.splice(index, 1) |
|
||||
}, |
|
||||
|
|
||||
// 全选事件 |
|
||||
handleCheckAll() { |
|
||||
const { checkedIds, list } = this |
|
||||
this.checkedIds = checkedIds.length === list.length ? [] : list.map(item => item.id) |
|
||||
}, |
|
||||
|
|
||||
// 结算选中的商品 |
|
||||
handleOrder() { |
|
||||
const app = this |
|
||||
if (app.checkedIds.length) { |
|
||||
const cartIds = app.checkedIds.join() |
|
||||
app.$navTo('pages/checkout/index', { mode: 'cart', cartIds }) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 删除选中的商品弹窗事件 |
|
||||
handleDelete() { |
|
||||
const app = this |
|
||||
if (!app.checkedIds.length) { |
|
||||
return false |
|
||||
} |
|
||||
uni.showModal({ |
|
||||
title: '友情提示', |
|
||||
content: '您确定要删除该商品吗？', |
|
||||
showCancel: true, |
|
||||
success({ confirm }) { |
|
||||
// 确认删除 |
|
||||
confirm && app.onClearCart() |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 确认删除商品 |
|
||||
onClearCart() { |
|
||||
const app = this |
|
||||
CartApi.clear(app.checkedIds) |
|
||||
.then(result => { |
|
||||
app.getCartList() |
|
||||
app.handleToggleMode() |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
page { |
|
||||
background: #f5f5f5; |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss" scoped> |
|
||||
// 页面顶部 |
|
||||
.head-info { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 4rpx 30rpx; |
|
||||
// background-color: #fff; |
|
||||
height: 80rpx; |
|
||||
|
|
||||
.cart-total { |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
|
|
||||
.active { |
|
||||
color: #FA2209; |
|
||||
margin: 0 2rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.cart-edit { |
|
||||
padding-left: 20rpx; |
|
||||
|
|
||||
.icon { |
|
||||
margin-right: 12rpx; |
|
||||
} |
|
||||
|
|
||||
.edit { |
|
||||
color: #fa2209; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 购物车列表 |
|
||||
.cart-list { |
|
||||
padding: 0 16rpx 110rpx 16rpx; |
|
||||
} |
|
||||
|
|
||||
.cart-item { |
|
||||
background: #fff; |
|
||||
border-radius: 12rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 30rpx 16rpx; |
|
||||
margin-bottom: 24rpx; |
|
||||
|
|
||||
|
|
||||
.item-radio { |
|
||||
width: 56rpx; |
|
||||
height: 80rpx; |
|
||||
line-height: 80rpx; |
|
||||
margin-right: 10rpx; |
|
||||
text-align: center; |
|
||||
|
|
||||
.radio { |
|
||||
transform: scale(0.76) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-image { |
|
||||
width: 200rpx; |
|
||||
height: 200rpx; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.item-content { |
|
||||
flex: 1; |
|
||||
padding-left: 24rpx; |
|
||||
|
|
||||
.goods-title { |
|
||||
font-size: 28rpx; |
|
||||
max-height: 76rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-props { |
|
||||
margin-top: 14rpx; |
|
||||
height: 40rpx; |
|
||||
color: #ababab; |
|
||||
font-size: 24rpx; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
display: inline-block; |
|
||||
margin-right: 14rpx; |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background-color: #F5F5F5; |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.item-foot { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
margin-top: 20rpx; |
|
||||
|
|
||||
.goods-price { |
|
||||
vertical-align: bottom; |
|
||||
color: $uni-text-color-active; |
|
||||
|
|
||||
.unit { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.value { |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 空数据按钮 |
|
||||
.empty-ipt { |
|
||||
width: 220rpx; |
|
||||
margin: 0 auto; |
|
||||
font-size: 32rpx; |
|
||||
height: 64rpx; |
|
||||
line-height: 64rpx; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
border-radius: 50rpx; |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
} |
|
||||
|
|
||||
// 底部操作栏 |
|
||||
.footer-fixed { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
height: 96rpx; |
|
||||
background: #fff; |
|
||||
padding: 0 30rpx; |
|
||||
position: fixed; |
|
||||
bottom: var(--window-bottom); |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
z-index: 11; |
|
||||
|
|
||||
.all-radio { |
|
||||
width: 140rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.radio { |
|
||||
margin-bottom: -4rpx; |
|
||||
transform: scale(0.76) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.total-info { |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
padding-right: 30rpx; |
|
||||
|
|
||||
.goods-price { |
|
||||
vertical-align: bottom; |
|
||||
color: #fa2209; |
|
||||
|
|
||||
.unit { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.value { |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.cart-action { |
|
||||
width: 200rpx; |
|
||||
|
|
||||
.btn-wrapper { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.btn-item { |
|
||||
flex: 1; |
|
||||
font-size: 28rpx; |
|
||||
height: 72rpx; |
|
||||
line-height: 72rpx; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
border-radius: 50rpx; |
|
||||
} |
|
||||
|
|
||||
// 立即购买按钮 |
|
||||
.btn-main { |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
|
|
||||
// 禁用按钮 |
|
||||
&.disabled { |
|
||||
background: #ff9779; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,402 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<!-- 一级分类 --> |
|
||||
<scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }" @touchmove.stop.prevent> |
|
||||
<text class="type-nav" :class="{ selected: curIndex == -1 }" @click="handleSelectNav(-1)">全部</text> |
|
||||
<text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index" @click="handleSelectNav(index)">{{ item.name }}</text> |
|
||||
</scroll-view> |
|
||||
|
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" :bottombar="false" @up="upCallback"> |
|
||||
|
|
||||
<view class="cate-content"> |
|
||||
|
|
||||
<!-- 子分类 --> |
|
||||
<view v-if="subCateList.length" class="sub-cate-list clearfix" :class="{ 'display-fold': !showSubCate }" @touchmove.stop.prevent> |
|
||||
<view class="nav-icon" @click="handleShowSubCate"> |
|
||||
<text class="iconfont" :class="[ showSubCate ? 'icon-arrow-up' : 'icon-arrow-down' ]"></text> |
|
||||
</view> |
|
||||
<view class="sub-cate-item" :class="{ selected: curIndex2 == -1 }" @click="handleSelectSubCate(-1)"> |
|
||||
<text>全部</text> |
|
||||
</view> |
|
||||
<view class="sub-cate-item" v-for="(item, index) in subCateList" :key="index" :class="{ selected: curIndex2 == index }" @click="handleSelectSubCate(index)"> |
|
||||
<text>{{ item.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品列表 --> |
|
||||
<view class="goods-list"> |
|
||||
<view class="goods-item--container" v-for="(item, index) in goodsList.data" :key="index"> |
|
||||
<view class="goods-item" @click="onTargetGoods(item.goods_id)"> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="goods-item_left"> |
|
||||
<image class="image" :src="item.goods_image"></image> |
|
||||
</view> |
|
||||
<view class="goods-item_right"> |
|
||||
<!-- 商品标题 --> |
|
||||
<view class="goods-name"> |
|
||||
<text class="twoline-hide">{{ item.goods_name }}</text> |
|
||||
</view> |
|
||||
<!-- 商品信息 --> |
|
||||
<view class="goods-item_desc"> |
|
||||
<view class="desc_footer"> |
|
||||
<view class="item-prices oneline-hide"> |
|
||||
<text class="price_x">¥{{ item.goods_price_min }}</text> |
|
||||
<text v-if="item.line_price_min > 0" class="price_y">¥{{ item.line_price_min }}</text> |
|
||||
</view> |
|
||||
<add-cart-btn v-if="setting.showAddCart" :btnStyle="setting.cartStyle" @click="handleAddCart(item)" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 遮罩层 --> |
|
||||
<view class="mask" v-show="showSubCate" @touchmove.stop.prevent @click="handleShowSubCate"></view> |
|
||||
<!-- 加入购物车组件 --> |
|
||||
<AddCartPopup ref="AddCartPopup" @addCart="onUpdateCartTabBadge" /> |
|
||||
|
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import { getEmptyPaginateObj, getMoreListData, setCartTabBadge } from '@/core/app' |
|
||||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|
||||
import Empty from '@/components/empty' |
|
||||
import AddCartBtn from '@/components/add-cart-btn' |
|
||||
import AddCartPopup from '@/components/add-cart-popup' |
|
||||
import { rpx2px } from '@/utils/util' |
|
||||
import * as GoodsApi from '@/api/goods' |
|
||||
|
|
||||
const pageSize = 15 |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody, |
|
||||
Empty, |
|
||||
AddCartBtn, |
|
||||
AddCartPopup |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
props: { |
|
||||
// 分类列表 |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: [] |
|
||||
}, |
|
||||
// 分类设置 |
|
||||
setting: { |
|
||||
type: Object, |
|
||||
default: () => {} |
|
||||
}, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
PageCategoryStyleEnum, |
|
||||
// 列表高度 |
|
||||
scrollHeight: 0, |
|
||||
// 一级分类：指针 |
|
||||
curIndex: -1, |
|
||||
// 是否显示子分类 |
|
||||
showSubCate: false, |
|
||||
// 二级分类：指针 |
|
||||
curIndex2: -1, |
|
||||
// 商品列表 |
|
||||
goodsList: getEmptyPaginateObj(), |
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于3条才显示无更多数据 |
|
||||
noMoreSize: 3, |
|
||||
// 返回顶部 |
|
||||
toTop: { right: 30, bottom: 48, zIndex: 9 } |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// 设置分类列表高度 |
|
||||
this.setListHeight() |
|
||||
}, |
|
||||
computed: { |
|
||||
// 二级分类列表 |
|
||||
subCateList() { |
|
||||
if (this.list[this.curIndex] && this.list[this.curIndex].children) { |
|
||||
return this.list[this.curIndex].children |
|
||||
} |
|
||||
return [] |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getGoodsList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 获取商品列表 |
|
||||
* @param {Number} pageNo 页码 |
|
||||
*/ |
|
||||
getGoodsList(pageNo = 1) { |
|
||||
const app = this |
|
||||
const categoryId = app.getCategoryId() |
|
||||
return new Promise((resolve, reject) => { |
|
||||
GoodsApi.list({ categoryId, page: pageNo }, { load: false }) |
|
||||
.then(result => { |
|
||||
const newList = result.data.list |
|
||||
app.goodsList.data = getMoreListData(newList, app.goodsList, pageNo) |
|
||||
app.goodsList.last_page = newList.last_page |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取当前选择的分类ID |
|
||||
getCategoryId() { |
|
||||
const app = this |
|
||||
if (app.curIndex2 > -1) { |
|
||||
return app.subCateList[app.curIndex2].category_id |
|
||||
} |
|
||||
return app.curIndex > -1 ? app.list[app.curIndex].category_id : 0 |
|
||||
}, |
|
||||
|
|
||||
// 设置列表内容的高度 |
|
||||
setListHeight() { |
|
||||
const { windowHeight } = uni.getSystemInfoSync() |
|
||||
this.scrollHeight = windowHeight - rpx2px(88) |
|
||||
}, |
|
||||
|
|
||||
// 一级分类：选中分类 |
|
||||
handleSelectNav(index) { |
|
||||
this.curIndex = index |
|
||||
this.onRefreshList() |
|
||||
this.showSubCate = false |
|
||||
this.curIndex2 = -1 |
|
||||
}, |
|
||||
|
|
||||
// 二级分类：选中分类 |
|
||||
handleSelectSubCate(index) { |
|
||||
this.curIndex2 = index |
|
||||
this.showSubCate = false |
|
||||
this.onRefreshList() |
|
||||
}, |
|
||||
|
|
||||
// 刷新列表数据 |
|
||||
onRefreshList() { |
|
||||
this.goodsList = getEmptyPaginateObj() |
|
||||
setTimeout(() => this.mescroll.resetUpScroll(), 120) |
|
||||
}, |
|
||||
|
|
||||
// 跳转至商品列表页 |
|
||||
onTargetGoods(goodsId) { |
|
||||
this.$navTo('pages/goods/detail', { goodsId }) |
|
||||
}, |
|
||||
|
|
||||
// 点击加入购物车 |
|
||||
handleAddCart(item) { |
|
||||
this.$refs.AddCartPopup.handle(item) |
|
||||
}, |
|
||||
|
|
||||
// 更新购物车角标 |
|
||||
onUpdateCartTabBadge() { |
|
||||
console.log('onUpdateCartTabBadge') |
|
||||
setCartTabBadge() |
|
||||
}, |
|
||||
|
|
||||
// 切换子分类显示状态 |
|
||||
handleShowSubCate() { |
|
||||
this.showSubCate = !this.showSubCate |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.container { |
|
||||
padding-left: 173rpx; |
|
||||
} |
|
||||
|
|
||||
// 分类内容 |
|
||||
.cate-content { |
|
||||
z-index: 1; |
|
||||
background: #fff; |
|
||||
padding-top: 88rpx; |
|
||||
min-height: 300rpx; |
|
||||
} |
|
||||
|
|
||||
// 一级分类+二级分类 20 |
|
||||
.cate-left { |
|
||||
position: fixed; |
|
||||
top: calc(88rpx + var(--window-top)); |
|
||||
left: var(--window-left); |
|
||||
bottom: var(--window-bottom); |
|
||||
width: 173rpx; |
|
||||
height: 100%; |
|
||||
background: #f8f8f8; |
|
||||
color: #444; |
|
||||
} |
|
||||
|
|
||||
// 左侧一级分类 |
|
||||
.type-nav { |
|
||||
position: relative; |
|
||||
height: 90rpx; |
|
||||
z-index: 10; |
|
||||
display: block; |
|
||||
font-size: 26rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
|
|
||||
&.selected { |
|
||||
background: #fff; |
|
||||
border-right: none; |
|
||||
font-size: 28rpx; |
|
||||
color: #fa2209; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品列表 |
|
||||
.goods-list { |
|
||||
background: #fff; |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.goods-item { |
|
||||
padding: 28rpx 22rpx; |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.goods-item_left { |
|
||||
position: relative; |
|
||||
background: #fff; |
|
||||
margin-right: 20rpx; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 180rpx; |
|
||||
height: 180rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-item_right { |
|
||||
position: relative; |
|
||||
flex: 1; |
|
||||
|
|
||||
.goods-name { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
min-height: 68rpx; |
|
||||
font-size: 28rpx; |
|
||||
line-height: 1.3; |
|
||||
color: #333; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-item_desc { |
|
||||
margin-top: 20rpx; |
|
||||
|
|
||||
.people { |
|
||||
margin-right: 14rpx; |
|
||||
} |
|
||||
|
|
||||
.desc_footer { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
position: absolute; |
|
||||
right: 0rpx; |
|
||||
bottom: 0rpx; |
|
||||
min-height: 44rpx; |
|
||||
|
|
||||
.item-prices { |
|
||||
padding-right: 6rpx; |
|
||||
|
|
||||
.price_x { |
|
||||
margin-right: 14rpx; |
|
||||
color: rgb(240, 60, 60); |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
.price_y { |
|
||||
color: #999; |
|
||||
text-decoration: line-through; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
// 子分类 |
|
||||
.sub-cate-list { |
|
||||
background-color: #fff; |
|
||||
width: 100%; |
|
||||
z-index: 9; |
|
||||
padding: 8rpx 40rpx 0 14rpx; |
|
||||
overflow: hidden; |
|
||||
position: sticky; |
|
||||
top: calc(88rpx + var(--window-top)); |
|
||||
|
|
||||
&.display-fold { |
|
||||
height: 86rpx; |
|
||||
} |
|
||||
|
|
||||
.nav-icon { |
|
||||
position: absolute; |
|
||||
right: 16rpx; |
|
||||
top: 12rpx; |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
|
|
||||
.sub-cate-item { |
|
||||
float: left; |
|
||||
background: #f8f8f8; |
|
||||
padding: 10rpx 30rpx; |
|
||||
margin-right: 22rpx; |
|
||||
margin-bottom: 24rpx; |
|
||||
font-size: 26rpx; |
|
||||
border-radius: 14rpx; |
|
||||
border: 1rpx solid #f8f8f8; |
|
||||
|
|
||||
&.selected { |
|
||||
color: #fa2209; |
|
||||
border: 1rpx solid #fa2209; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 子分类遮罩层 |
|
||||
.mask { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
left: 0; |
|
||||
z-index: 8; |
|
||||
background-color: rgba(0, 0, 0, 0.4); |
|
||||
transition: all 0.3s ease-in-out 0s; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,110 +0,0 @@ |
|||||
<template> |
|
||||
<view class="primary"> |
|
||||
<!-- 一级分类(大图) 10 --> |
|
||||
<view v-if="list.length > 0 && display == PageCategoryStyleEnum.ONE_LEVEL_BIG.value" class="cate-content"> |
|
||||
<view class="cate-wrapper cate_style__10 clearfix"> |
|
||||
<view class="cate-item" v-for="(item, index) in list" :key="index" @click="onTargetGoodsList(item.category_id)"> |
|
||||
<image v-if="item.image" class="image" mode="widthFix" :src="item.image.preview_url"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 一级分类(小图) 11 --> |
|
||||
<view v-if="list.length > 0 && display == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value" class="cate-content"> |
|
||||
<view class="cate-wrapper cate_style__11 clearfix"> |
|
||||
<view class="cate-item" v-for="(item, index) in list" :key="index" @click="onTargetGoodsList(item.category_id)"> |
|
||||
<image v-if="item.image" class="image" mode="widthFix" :src="item.image.preview_url"></image> |
|
||||
<view class="cate-name">{{ item.name }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<empty v-if="!list.length" :tips="'亲，暂无商品分类' + display" /> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|
||||
import Empty from '@/components/empty' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Empty |
|
||||
}, |
|
||||
props: { |
|
||||
// 分类页样式 |
|
||||
display: { |
|
||||
type: Number, |
|
||||
default: 10 |
|
||||
}, |
|
||||
// 分类列表 |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
PageCategoryStyleEnum, |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 跳转至商品列表页 |
|
||||
onTargetGoodsList(categoryId) { |
|
||||
this.$navTo('pages/goods/list', { categoryId }) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
// 分类内容 |
|
||||
.cate-content { |
|
||||
z-index: 1; |
|
||||
background: #fff; |
|
||||
padding-top: 96rpx; |
|
||||
|
|
||||
.cate-wrapper { |
|
||||
padding: 0 20rpx 20rpx 20rpx; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 一级分类(大图) 10 |
|
||||
.cate_style__10 .cate-item { |
|
||||
margin-bottom: 20rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 一级分类(小图) 11 |
|
||||
.cate_style__11 .cate-item { |
|
||||
float: left; |
|
||||
padding: 25rpx; |
|
||||
width: 33.3333%; |
|
||||
text-align: center; |
|
||||
box-sizing: border-box; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 33vw; |
|
||||
margin-bottom: 12rpx; |
|
||||
} |
|
||||
|
|
||||
.cate-name { |
|
||||
font-size: 28rpx; |
|
||||
color: #555; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,180 +0,0 @@ |
|||||
<template> |
|
||||
<view v-if="list.length > 0" class="secondary"> |
|
||||
<!-- 二级分类 20 --> |
|
||||
<view class="cate-content"> |
|
||||
<!-- 左侧 一级分类 --> |
|
||||
<scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }"> |
|
||||
<text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index" |
|
||||
@click="handleSelectNav(index)">{{ item.name }}</text> |
|
||||
</scroll-view> |
|
||||
<!-- 右侧 二级分类 --> |
|
||||
<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }"> |
|
||||
<view v-if="list[curIndex]" class="cate-right-cont"> |
|
||||
<view class="cate-two-box"> |
|
||||
<view class="cate-cont-box"> |
|
||||
<view class="flex-three" v-for="(item, idx) in list[curIndex].children" :key="idx" @click="onTargetGoodsList(item.category_id)"> |
|
||||
<view class="cate-img-padding"> |
|
||||
<view v-if="item.image" class="cate-img"> |
|
||||
<image class="image" mode="scaleToFill" :src="item.image.preview_url"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
<text class="name oneline-hide">{{ item.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
<empty v-if="!list.length" /> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|
||||
import Empty from '@/components/empty' |
|
||||
import { rpx2px } from '@/utils/util' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Empty |
|
||||
}, |
|
||||
props: { |
|
||||
// 分类列表 |
|
||||
list: { |
|
||||
type: Array, |
|
||||
default: [] |
|
||||
}, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
PageCategoryStyleEnum, |
|
||||
// 列表高度 |
|
||||
scrollHeight: 0, |
|
||||
// 一级分类：指针 |
|
||||
curIndex: 0, |
|
||||
// 内容区竖向滚动条位置 |
|
||||
scrollTop: 0, |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// 设置分类列表高度 |
|
||||
this.setListHeight() |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
// 设置列表内容的高度 |
|
||||
setListHeight() { |
|
||||
const { windowHeight } = uni.getSystemInfoSync() |
|
||||
this.scrollHeight = windowHeight - rpx2px(96) |
|
||||
}, |
|
||||
|
|
||||
// 一级分类：选中分类 |
|
||||
handleSelectNav(index) { |
|
||||
this.curIndex = index |
|
||||
this.scrollTop = 0 |
|
||||
}, |
|
||||
|
|
||||
// 跳转至商品列表页 |
|
||||
onTargetGoodsList(categoryId) { |
|
||||
this.$navTo('pages/goods/list', { categoryId }) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
// 分类内容 |
|
||||
.cate-content { |
|
||||
display: flex; |
|
||||
z-index: 1; |
|
||||
background: #fff; |
|
||||
padding-top: 96rpx; |
|
||||
} |
|
||||
|
|
||||
// 一级分类+二级分类 20 |
|
||||
.cate-left { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
flex: 0 0 23%; |
|
||||
background: #f8f8f8; |
|
||||
color: #444; |
|
||||
} |
|
||||
|
|
||||
.cate-right { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.cate-right-cont { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
flex-flow: row wrap; |
|
||||
align-content: flex-start; |
|
||||
padding-top: 15rpx; |
|
||||
|
|
||||
.cate-two-box { |
|
||||
width: 100%; |
|
||||
padding: 0 10px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 左侧一级分类 |
|
||||
.type-nav { |
|
||||
position: relative; |
|
||||
height: 90rpx; |
|
||||
z-index: 10; |
|
||||
display: block; |
|
||||
font-size: 26rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
|
|
||||
&.selected { |
|
||||
background: #fff; |
|
||||
color: #fa2209; |
|
||||
border-right: none; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 右侧二级分类 |
|
||||
.cate-cont-box { |
|
||||
margin-bottom: 30rpx; |
|
||||
padding-bottom: 10rpx; |
|
||||
background: #fff; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.name { |
|
||||
display: block; |
|
||||
padding-bottom: 30rpx; |
|
||||
text-align: center; |
|
||||
font-size: 26rpx; |
|
||||
color: #444444; |
|
||||
} |
|
||||
|
|
||||
.cate-img-padding { |
|
||||
padding: 16rpx 16rpx 4rpx 16rpx; |
|
||||
} |
|
||||
|
|
||||
.cate-img { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
padding-top: 100%; |
|
||||
|
|
||||
.image { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
border-radius: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,165 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<!-- 搜索框 --> |
|
||||
<search class="search" tips="搜索商品" @event="$navTo('pages/search/index')" /> |
|
||||
|
|
||||
<!-- 一级分类 --> |
|
||||
<primary v-if="setting.style == PageCategoryStyleEnum.ONE_LEVEL_BIG.value || setting.style == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value" |
|
||||
:display="setting.style" :list="list" /> |
|
||||
|
|
||||
<!-- 二级分类 --> |
|
||||
<secondary v-if="setting.style == PageCategoryStyleEnum.TWO_LEVEL.value" :list="list" /> |
|
||||
|
|
||||
<!-- 分类+商品 --> |
|
||||
<commodity v-if="setting.style == PageCategoryStyleEnum.COMMODITY.value" ref="mescrollItem" :list="list" :setting="setting" /> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp' |
|
||||
import { setCartTabBadge } from '@/core/app' |
|
||||
import SettingKeyEnum from '@/common/enum/setting/Key' |
|
||||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|
||||
import SettingModel from '@/common/model/Setting' |
|
||||
import * as CategoryApi from '@/api/category' |
|
||||
import Empty from '@/components/empty' |
|
||||
import Search from '@/components/search' |
|
||||
import Primary from './components/primary' |
|
||||
import Secondary from './components/secondary' |
|
||||
import Commodity from './components/commodity' |
|
||||
|
|
||||
// 最后一次刷新时间 |
|
||||
let lastRefreshTime; |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Search, |
|
||||
Empty, |
|
||||
Primary, |
|
||||
Secondary, |
|
||||
Commodity |
|
||||
}, |
|
||||
mixins: [MescrollCompMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
PageCategoryStyleEnum, |
|
||||
// 分类列表 |
|
||||
list: [], |
|
||||
// 分类模板设置 |
|
||||
setting: {}, |
|
||||
// 正在加载中 |
|
||||
isLoading: true |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad() { |
|
||||
// 加载页面数据 |
|
||||
this.onRefreshPage() |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow() { |
|
||||
// 每间隔5分钟自动刷新一次页面数据 |
|
||||
const curTime = new Date().getTime() |
|
||||
if ((curTime - lastRefreshTime) > 5 * 60 * 1000) { |
|
||||
this.onRefreshPage() |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
// 刷新页面 |
|
||||
onRefreshPage() { |
|
||||
// 记录刷新时间 |
|
||||
lastRefreshTime = new Date().getTime() |
|
||||
// 获取页面数据 |
|
||||
this.getPageData() |
|
||||
// 更新购物车角标 |
|
||||
setCartTabBadge() |
|
||||
}, |
|
||||
|
|
||||
// 获取页面数据 |
|
||||
getPageData() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
Promise.all([ |
|
||||
// 获取分类模板设置 |
|
||||
// 优化建议: 可以将此处的false改为true 启用缓存 |
|
||||
SettingModel.data(false), |
|
||||
// 获取分类列表 |
|
||||
CategoryApi.list() |
|
||||
]) |
|
||||
.then(result => { |
|
||||
// 初始化分类模板设置 |
|
||||
app.initSetting(result[0]) |
|
||||
// 初始化分类列表数据 |
|
||||
app.initCategory(result[1]) |
|
||||
}) |
|
||||
.finally(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 初始化分类模板设置 |
|
||||
* @param {Object} result |
|
||||
*/ |
|
||||
initSetting(setting) { |
|
||||
this.setting = setting[SettingKeyEnum.PAGE_CATEGORY_TEMPLATE.value] |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 初始化分类列表数据 |
|
||||
* @param {Object} result |
|
||||
*/ |
|
||||
initCategory(result) { |
|
||||
this.list = result.data.list |
|
||||
}, |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 设置分享内容 |
|
||||
*/ |
|
||||
onShareAppMessage() { |
|
||||
const app = this |
|
||||
return { |
|
||||
title: _this.templet.shareTitle, |
|
||||
path: '/pages/category/index?' + app.$getShareUrlParams() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 分享到朋友圈 |
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta) |
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html |
|
||||
*/ |
|
||||
onShareTimeline() { |
|
||||
const app = this |
|
||||
return { |
|
||||
title: _this.templet.shareTitle, |
|
||||
path: '/pages/category/index?' + app.$getShareUrlParams() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
page { |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss" scoped> |
|
||||
// 搜索框 |
|
||||
.search { |
|
||||
position: fixed; |
|
||||
top: var(--window-top); |
|
||||
left: var(--window-left); |
|
||||
right: var(--window-right); |
|
||||
z-index: 9; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,523 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container p-bottom" v-if="order.goodsList.length"> |
|
||||
|
|
||||
<!-- 快递配送：配送地址 --> |
|
||||
<view v-if="curDelivery == DeliveryTypeEnum.EXPRESS.value" @click="onSelectAddress" class="flow-delivery"> |
|
||||
<view class="flow-delivery__detail dis-flex flex-y-center"> |
|
||||
<view class="detail-location dis-flex"> |
|
||||
<text class="iconfont icon-dingwei"></text> |
|
||||
</view> |
|
||||
<view class="detail-content flex-box"> |
|
||||
<block v-if="order.address"> |
|
||||
<view class="detail-content__title dis-flex"> |
|
||||
<text class="f-30">{{ order.address.name }}</text> |
|
||||
<text class="detail-content__title-phone f-28">{{ order.address.phone }}</text> |
|
||||
</view> |
|
||||
<view class="address detail-content__describe"> |
|
||||
<text class="region" v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text> |
|
||||
<text class="detail">{{ order.address.detail }}</text> |
|
||||
</view> |
|
||||
</block> |
|
||||
<block v-else> |
|
||||
<view class="detail-content__describe dis-flex"> |
|
||||
<text class="col-6">请选择配送地址</text> |
|
||||
</view> |
|
||||
</block> |
|
||||
</view> |
|
||||
<view class="detail-arrow dis-flex"> |
|
||||
<text class="iconfont icon-arrow-right"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品列表 --> |
|
||||
<view class="m-top20"> |
|
||||
<view class="checkout_list" v-for="(item, index) in order.goodsList" :key="index"> |
|
||||
<view class="flow-shopList dis-flex" data-index="index" @click="onTargetGoods(item.goods_id)"> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="flow-list-left"> |
|
||||
<image mode="scaleToFill" :src="item.goods_image"></image> |
|
||||
</view> |
|
||||
<view class="flow-list-right flex-box"> |
|
||||
<!-- 商品名称 --> |
|
||||
<text class="goods-name twoline-hide">{{ item.goods_name }}</text> |
|
||||
<!-- 商品规格 --> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in item.skuInfo.goods_props" :key="idx"> |
|
||||
<text class="group-name">{{ props.group.name }}: </text> |
|
||||
<text>{{ props.value.name }}；</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 商品数量和单价 --> |
|
||||
<view class="flow-list-cont dis-flex flex-x-between flex-y-center"> |
|
||||
<text class="small">×{{ item.total_num }}</text> |
|
||||
<text class="flow-cont" :class="[item.is_user_grade ? 'price-delete' : '']">￥{{ item.goods_price }}</text> |
|
||||
</view> |
|
||||
<!-- 会员折扣价 --> |
|
||||
<view v-if="item.is_user_grade" class="grade-price"> |
|
||||
<text>会员折扣价：￥{{ item.grade_goods_price }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="flow-num-box b-f"> |
|
||||
<text>共{{ order.orderTotalNum }}件商品，合计：</text> |
|
||||
<text class="flow-money col-m">￥{{ order.orderTotalPrice }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品金额 --> |
|
||||
<view class="flow-all-money b-f m-top20"> |
|
||||
<view class="flow-all-list dis-flex"> |
|
||||
<text class="flex-five">订单总金额：</text> |
|
||||
<view class="flex-five t-r"> |
|
||||
<text class="col-m">￥{{ order.orderTotalPrice }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 优惠券 --> |
|
||||
<view class="flow-all-list dis-flex"> |
|
||||
<text class="flex-five">优惠券：</text> |
|
||||
<view class="flex-five t-r"> |
|
||||
<view v-if="order.couponList.length > 0" @click="handleShowPopup()"> |
|
||||
<text class="col-m" v-if="order.couponId > 0">-￥{{ order.couponMoney }}</text> |
|
||||
<text class="col-m" v-else>有{{ order.couponList.length }}张优惠券</text> |
|
||||
<text class="right-arrow iconfont icon-arrow-right"></text> |
|
||||
</view> |
|
||||
<text v-else class="">无优惠券可用</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 积分抵扣 --> |
|
||||
<view v-if="order.isAllowPoints" class="points flow-all-list dis-flex flex-y-center"> |
|
||||
<view class="block-left flex-five" @click="handleShowPoints()"> |
|
||||
<text class="title">可用{{ setting.points_name }}抵扣：</text> |
|
||||
<text class="iconfont icon-help"></text> |
|
||||
</view> |
|
||||
<view class="flex-five dis-flex flex-x-end flex-y-center"> |
|
||||
<text class="points-money col-m">-￥{{ order.pointsMoney }}</text> |
|
||||
<u-switch v-model="isUsePoints" size="48" active-color="#07c160" @change="getOrderData()"></u-switch> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 配送费用 --> |
|
||||
<view v-if="curDelivery == DeliveryTypeEnum.EXPRESS.value" class="dis-flex flow-all-list"> |
|
||||
<text class="flex-five">配送费用：</text> |
|
||||
<view class="flex-five t-r"> |
|
||||
<view v-if="order.address"> |
|
||||
<text class="col-m" v-if="order.isIntraRegion">+￥{{ order.expressPrice }}</text> |
|
||||
<text v-else>不在配送范围</text> |
|
||||
</view> |
|
||||
<view v-else> |
|
||||
<text class="col-7">请先选择配送地址</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 支付方式 --> |
|
||||
<view class="pay-method flow-all-money b-f m-top20"> |
|
||||
<view class="flow-all-list dis-flex"> |
|
||||
<text class="flex-five">支付方式</text> |
|
||||
</view> |
|
||||
<!-- 微信支付 --> |
|
||||
<!-- #ifdef MP-WEIXIN --> |
|
||||
<view class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(PayTypeEnum.WECHAT.value)"> |
|
||||
<view class="item-left dis-flex flex-y-center"> |
|
||||
<view class="item-left_icon wechat"> |
|
||||
<text class="iconfont icon-wechat-pay"></text> |
|
||||
</view> |
|
||||
<view class="item-left_text"> |
|
||||
<text>{{ PayTypeEnum.WECHAT.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item-right col-m" v-if="curPayType == PayTypeEnum.WECHAT.value"> |
|
||||
<text class="iconfont icon-check"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- #endif --> |
|
||||
<!-- 余额支付 --> |
|
||||
<view class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(PayTypeEnum.BALANCE.value)"> |
|
||||
<view class="item-left dis-flex flex-y-center"> |
|
||||
<view class="item-left_icon balance"> |
|
||||
<text class="iconfont icon-balance-pay"></text> |
|
||||
</view> |
|
||||
<view class="item-left_text"> |
|
||||
<text>{{ PayTypeEnum.BALANCE.name }}</text> |
|
||||
</view> |
|
||||
<view class="user-balance"> |
|
||||
<text>(可用￥{{ personal.balance }}元)</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item-right col-m" v-if="curPayType == PayTypeEnum.BALANCE.value"> |
|
||||
<text class="iconfont icon-check"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 买家留言 --> |
|
||||
<view class="flow-all-money b-f m-top20"> |
|
||||
<view class="ipt-wrapper dis-flex flow-all-list"> |
|
||||
<input v-model="remark" placeholder="选填：买家留言（50字以内）"></input> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 提交订单 --> |
|
||||
<view class="flow-fixed-footer b-f m-top10"> |
|
||||
<view class="dis-flex chackout-box"> |
|
||||
<view class="chackout-left pl-12">实付款： |
|
||||
<text class="col-m">￥{{ order.orderPayPrice }}</text> |
|
||||
</view> |
|
||||
<view class="chackout-right" @click="onSubmitOrder()"> |
|
||||
<view class="flow-btn f-32" :class="{ disabled }">提交订单</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 积分说明弹窗 --> |
|
||||
<u-modal v-model="showPoints" :title="`${setting.points_name}说明`"> |
|
||||
<scroll-view class="points-content" :scroll-y="true"> |
|
||||
<text>{{ setting.points_describe }}</text> |
|
||||
</scroll-view> |
|
||||
</u-modal> |
|
||||
|
|
||||
<!-- 优惠券弹出框 --> |
|
||||
<u-popup v-model="showPopup" mode="bottom"> |
|
||||
<view class="popup__coupon"> |
|
||||
<view class="coupon__title f-30">选择优惠券</view> |
|
||||
<!-- 优惠券列表 --> |
|
||||
<view class="coupon-list"> |
|
||||
<scroll-view :scroll-y="true" style="height: 565rpx;"> |
|
||||
<view class="coupon-item" v-for="(item, index) in order.couponList" :key="index"> |
|
||||
<view class="item-wrapper" |
|
||||
:class="[item.is_apply ? 'color-' + CouponColors[index % CouponColors.length] : 'color-gray']" |
|
||||
@click="handleSelectCoupon(index)"> |
|
||||
<view class="coupon-type">{{ CouponTypeEnum[item.coupon_type].name }}</view> |
|
||||
<view class="tip dis-flex flex-dir-column flex-x-center"> |
|
||||
<view v-if="item.coupon_type == CouponTypeEnum.FULL_DISCOUNT.value"> |
|
||||
<text class="f-30">￥</text> |
|
||||
<text class="money">{{ item.reduce_price }}</text> |
|
||||
</view> |
|
||||
<text class="money" |
|
||||
v-if="item.coupon_type == CouponTypeEnum.DISCOUNT.value">{{ item.discount }}折</text> |
|
||||
<text class="pay-line">满{{ item.min_price }}元可用</text> |
|
||||
</view> |
|
||||
<view class="split-line"></view> |
|
||||
<view class="content dis-flex flex-dir-column flex-x-between"> |
|
||||
<view class="title">{{ item.name }}</view> |
|
||||
<view class="bottom dis-flex flex-y-center"> |
|
||||
<view class="time flex-box"> |
|
||||
<block v-if="item.start_time === item.end_time">{{ item.start_time }}</block> |
|
||||
<block v-else>{{ item.start_time }}~{{ item.end_time }}</block> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
<!-- 不使用优惠券 --> |
|
||||
<view class="coupon__do_not dis-flex flex-y-center flex-x-center"> |
|
||||
<view class="control dis-flex flex-y-center flex-x-center" @click="handleNotUseCoupon()"> |
|
||||
<text class="f-26">不使用优惠券</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-popup> |
|
||||
|
|
||||
</view> |
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as Verify from '@/utils/verify' |
|
||||
import * as CheckoutApi from '@/api/checkout' |
|
||||
import { CouponTypeEnum } from '@/common/enum/coupon' |
|
||||
import DeliveryTypeEnum from '@/common/enum/order/DeliveryType' |
|
||||
import PayTypeEnum from '@/common/enum/order/PayType' |
|
||||
import { wxPayment } from '@/core/app' |
|
||||
|
|
||||
const CouponColors = ['red', 'blue', 'violet', 'yellow'] |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
DeliveryTypeEnum, |
|
||||
PayTypeEnum, |
|
||||
CouponTypeEnum, |
|
||||
// 当前页面参数 |
|
||||
options: {}, |
|
||||
// 优惠券颜色组 |
|
||||
CouponColors, |
|
||||
// 当前选中的配送方式 |
|
||||
curDelivery: null, |
|
||||
// 当前选中的支付方式 |
|
||||
curPayType: PayTypeEnum.BALANCE.value, |
|
||||
// 选择的优惠券 |
|
||||
selectCouponId: 0, |
|
||||
// 是否使用积分抵扣 |
|
||||
isUsePoints: false, |
|
||||
// 买家留言 |
|
||||
remark: '', |
|
||||
// 禁用submit按钮 |
|
||||
disabled: false, |
|
||||
// 是否显示积分说明 |
|
||||
showPoints: false, |
|
||||
// 是否显示优惠券弹窗 |
|
||||
showPopup: false, |
|
||||
// 按钮禁用 |
|
||||
disabled: false, |
|
||||
// 订单信息 (从后端api中获取) |
|
||||
order: { |
|
||||
// 商品列表 |
|
||||
goodsList: [], |
|
||||
// 优惠券列表 |
|
||||
couponList: [], |
|
||||
// 是否存在收货地址 |
|
||||
existAddress: false, |
|
||||
// 默认收货地址 |
|
||||
address: null, |
|
||||
// 是否存在收货地址 |
|
||||
existAddress: false, |
|
||||
// 当前用户收货城市是否存在配送规则中 |
|
||||
isIntraRegion: true, |
|
||||
// 是否存在错误 |
|
||||
hasError: false, |
|
||||
// 错误信息 |
|
||||
errorMsg: '' |
|
||||
}, |
|
||||
// 个人信息 |
|
||||
personal: {}, |
|
||||
// 商城设置 |
|
||||
setting: {} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
this.options = options |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow() { |
|
||||
// 获取当前订单信息 |
|
||||
this.getOrderData() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取订单数据 |
|
||||
getOrderData() { |
|
||||
const app = this |
|
||||
// 请求的参数 |
|
||||
const params = { |
|
||||
delivery: app.curDelivery || 0, |
|
||||
couponId: app.selectCouponId || 0, |
|
||||
isUsePoints: app.isUsePoints ? 1 : 0, |
|
||||
} |
|
||||
// 请求api |
|
||||
CheckoutApi.order(app.options.mode, app.getRequestParam()) |
|
||||
.then(result => { |
|
||||
app.initData(result.data) |
|
||||
}) |
|
||||
.catch(err => err) |
|
||||
}, |
|
||||
|
|
||||
// 初始化数据 |
|
||||
initData({ order, setting, personal }) { |
|
||||
const app = this |
|
||||
app.order = order |
|
||||
app.personal = personal |
|
||||
app.setting = setting |
|
||||
// 显示错误信息 |
|
||||
if (order.hasError) { |
|
||||
app.$toast(order.errorMsg) |
|
||||
} |
|
||||
// 当前选择的配送方式 |
|
||||
app.curDelivery = order.delivery |
|
||||
// 如果只有一种配送方式则不显示选项卡 |
|
||||
app.isShowTab = setting.deliveryType.length > 1 |
|
||||
// 当前选择支付方式 (如果是微信小程序默认使用微信支付) |
|
||||
if (app.$platform === 'MP-WEIXIN') { |
|
||||
app.curPayType = PayTypeEnum.WECHAT.value |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 获取api请求的参数 |
|
||||
getRequestParam() { |
|
||||
const app = this |
|
||||
const { options } = app |
|
||||
// 结算模式的固定参数 |
|
||||
const modeParam = {} |
|
||||
// 结算模式: 立即购买 |
|
||||
if (options.mode === 'buyNow') { |
|
||||
modeParam.goodsId = options.goodsId |
|
||||
modeParam.goodsNum = options.goodsNum |
|
||||
modeParam.goodsSkuId = options.goodsSkuId |
|
||||
} |
|
||||
// 结算模式: 购物车 |
|
||||
if (options.mode === 'cart') { |
|
||||
modeParam.cartIds = options.cartIds |
|
||||
} |
|
||||
// 订单结算参数(用户选择) |
|
||||
const orderParam = { |
|
||||
delivery: app.curDelivery || 0, |
|
||||
couponId: app.selectCouponId || 0, |
|
||||
isUsePoints: app.isUsePoints ? 1 : 0, |
|
||||
} |
|
||||
return { ...orderParam, ...modeParam } |
|
||||
}, |
|
||||
|
|
||||
// 显示积分说明 |
|
||||
handleShowPoints() { |
|
||||
this.showPoints = true |
|
||||
}, |
|
||||
|
|
||||
// 显示优惠券弹窗 |
|
||||
handleShowPopup() { |
|
||||
this.showPopup = true |
|
||||
}, |
|
||||
|
|
||||
// 选择优惠券 |
|
||||
handleSelectCoupon(index) { |
|
||||
const app = this |
|
||||
const { couponList } = app.order |
|
||||
// 当前选择的优惠券 |
|
||||
const couponItem = couponList[index] |
|
||||
// 判断是否在适用范围 |
|
||||
if (!couponItem.is_apply) { |
|
||||
app.$toast(couponItem.not_apply_info) |
|
||||
return |
|
||||
} |
|
||||
// 记录选中的优惠券id |
|
||||
app.selectCouponId = couponItem.user_coupon_id |
|
||||
// 重新获取订单信息 |
|
||||
app.getOrderData() |
|
||||
// 隐藏优惠券弹层 |
|
||||
app.showPopup = false |
|
||||
}, |
|
||||
|
|
||||
// 不使用优惠券 |
|
||||
handleNotUseCoupon() { |
|
||||
const app = this |
|
||||
app.selectCouponId = 0 |
|
||||
// 重新获取订单信息 |
|
||||
app.getOrderData() |
|
||||
// 隐藏优惠券弹层 |
|
||||
app.showPopup = false |
|
||||
}, |
|
||||
|
|
||||
// 选择支付方式 |
|
||||
handleSelectPayType(value) { |
|
||||
this.curPayType = value |
|
||||
}, |
|
||||
|
|
||||
// 快递配送：选择收货地址 |
|
||||
onSelectAddress() { |
|
||||
this.$navTo('pages/address/index', { from: 'checkout' }) |
|
||||
}, |
|
||||
|
|
||||
// 跳转到商品详情页 |
|
||||
onTargetGoods(goodsId) { |
|
||||
this.$navTo('pages/goods/detail', { goodsId }) |
|
||||
}, |
|
||||
|
|
||||
// 订单提交 |
|
||||
onSubmitOrder() { |
|
||||
const app = this |
|
||||
if (app.disabled) { |
|
||||
return false |
|
||||
} |
|
||||
// 表单验证 |
|
||||
if (!app.onVerifyFrom()) { |
|
||||
return false |
|
||||
} |
|
||||
// 按钮禁用 |
|
||||
app.disabled = true |
|
||||
// 请求api |
|
||||
CheckoutApi.submit(app.options.mode, app.getFormData()) |
|
||||
.then(result => app.onSubmitCallback(result)) |
|
||||
.catch(err => { |
|
||||
if (err.result) { |
|
||||
const errData = err.result.data |
|
||||
if (errData.is_created) { |
|
||||
app.navToMyOrder() |
|
||||
return false |
|
||||
} |
|
||||
} |
|
||||
app.disabled = false |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 订单提交成功后回调 |
|
||||
onSubmitCallback(result) { |
|
||||
const app = this |
|
||||
// 发起微信支付 |
|
||||
if (result.data.payType == PayTypeEnum.WECHAT.value) { |
|
||||
wxPayment(result.data.payment) |
|
||||
.then(() => app.$success('支付成功')) |
|
||||
.catch(err => app.$error('订单未支付')) |
|
||||
.finally(() => { |
|
||||
app.disabled = false |
|
||||
app.navToMyOrder() |
|
||||
}) |
|
||||
} |
|
||||
// 余额支付 |
|
||||
if (result.data.payType == PayTypeEnum.BALANCE.value) { |
|
||||
app.$success('支付成功') |
|
||||
app.disabled = false |
|
||||
app.navToMyOrder() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 跳转到我的订单(等待1秒) |
|
||||
navToMyOrder() { |
|
||||
setTimeout(() => { |
|
||||
this.$navTo('pages/order/index') |
|
||||
}, 1000) |
|
||||
}, |
|
||||
|
|
||||
// 表单提交的数据 |
|
||||
getFormData() { |
|
||||
const app = this |
|
||||
const { options } = app |
|
||||
// 表单数据 |
|
||||
const form = { |
|
||||
delivery: app.curDelivery, |
|
||||
payType: app.curPayType, |
|
||||
couponId: app.selectCouponId || 0, |
|
||||
isUsePoints: app.isUsePoints ? 1 : 0, |
|
||||
remark: app.remark || '', |
|
||||
} |
|
||||
// 创建订单-立即购买 |
|
||||
if (options.mode === 'buyNow') { |
|
||||
form.goodsId = options.goodsId |
|
||||
form.goodsNum = options.goodsNum |
|
||||
form.goodsSkuId = options.goodsSkuId |
|
||||
} |
|
||||
// 创建订单-购物车结算 |
|
||||
if (options.mode === 'cart') { |
|
||||
form.cartIds = options.cartIds || null |
|
||||
} |
|
||||
return form |
|
||||
}, |
|
||||
|
|
||||
// 表单验证 |
|
||||
onVerifyFrom() { |
|
||||
const app = this |
|
||||
if (app.hasError) { |
|
||||
app.$toast(app.errorMsg) |
|
||||
return false |
|
||||
} |
|
||||
return true |
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
@import "./style.scss"; |
|
||||
</style> |
|
||||
@ -1,445 +0,0 @@ |
|||||
|
|
||||
// 配送信息 |
|
||||
.flow-delivery { |
|
||||
padding: 34rpx 30rpx; |
|
||||
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAAANCAYAAADVGpDCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3Yjk4M2ExYy1jMDhkLTQ1OTktYTI0Ny1kZjNjYzdiYTQ5ZTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDQwNkY3RkU5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDQwNkY3RkQ5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNzgwZWI1NS03OGFhLTQzOTUtODQ4OC1lOWI5YmVlYTY1ZDciIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1OTRiYzUyMy1jMzc3LTExNzgtYTdkZS04NGY3YmM1ZGIxMDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz556PLxAAACBElEQVR42tyaSyhEYRTHP48imlKibDQeSSlkSlEWLCRFsZNH5FE2FqQ8ErIRC9lIkTwXSpMkWWChhEJCSnlkoUZGSsr78f98n43CMFPu/Z/6NZuZ2zn33/+cb869XkmLx8IDEQaGQJbgiytQDSY3MyL+LYnL/HxPXSoHDIJQQq2WQQk4Dbbb/yUB29LJ+6e3B66VB3ZITbUIEqSpCGoJBP1ghtBUD6ARpEtTGSEhXzd+awE9oJzQUPegWdf3QlBPMhgDMYRa7YNisGWkpP5qrBQtVBShUHugUE9hs4fUtwG0utlEjRivoA/Ug1sj3vjffr8FNJEK1auPFHcE9UTq5pdK2PwcoAzMG7mjuRrRYEIfK9jiDJSCBZJ6ynSTsBBqNQ0qgdPISbq6vJCFbJOaagrEk5gqWNczRGiqG1Ah1LLMafRkf5pYIUKtZnMJDXUNasAIST2ZYFioRx9ssQaKwJFZEv5uYmWDXVJTrYBEElP562PfPKGpnkAbSDOTqb6aWAGgW6iHol5kQj2CdtAJngnqkc1hHMQRNr9DPaXWzZj8Z2PZtFCxhEIdaKE2CGqRJ4060AH8CLUaALX6f5VpBZLhI9SaeZXQVHKNLt84SCIxVbhQi5YuQlNd6OVElZlN9TGxrGBUn2PZ4lyoTdIsST0FQj0UDSLUak6ot3gcBLVY3wQYAJoVXxmNERajAAAAAElFTkSuQmCC') bottom left repeat-x; |
|
||||
background-size: 120rpx auto; |
|
||||
|
|
||||
.detail-location { |
|
||||
font-size: 36rpx; |
|
||||
} |
|
||||
.detail-content { |
|
||||
padding: 0 20rpx; |
|
||||
.detail-content__title-phone { |
|
||||
margin-left: 10rpx; |
|
||||
} |
|
||||
.detail-content__describe { |
|
||||
font-size: 28rpx; |
|
||||
color: #777; |
|
||||
} |
|
||||
} |
|
||||
.detail-content__title { |
|
||||
margin-bottom: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 买家留言 |
|
||||
.flow-all-money { |
|
||||
.ipt-wrapper { |
|
||||
input { |
|
||||
font-size: 28rpx; |
|
||||
width: 100%; |
|
||||
height: 75rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品列表 |
|
||||
.checkout_list { |
|
||||
padding: 20rpx 30rpx 4rpx 30rpx; |
|
||||
background: #fff; |
|
||||
border-bottom: 1rpx solid rgb(248, 248, 248); |
|
||||
.flow-shopList { |
|
||||
padding: 5rpx 0 10rpx; |
|
||||
border-bottom: 1rpx solid rgb(248, 248, 248); |
|
||||
&:last-child { |
|
||||
border-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.flow-header-left { |
|
||||
padding-left: 90rpx; |
|
||||
} |
|
||||
|
|
||||
/* 会员价 */ |
|
||||
.flow-shopList { |
|
||||
|
|
||||
.flow-list-right { |
|
||||
.flow-cont { |
|
||||
|
|
||||
&.price-delete { |
|
||||
font-size: 26rpx; |
|
||||
color: #777; |
|
||||
text-decoration: line-through; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.grade-price { |
|
||||
padding-top: 8rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #ff495e; |
|
||||
text-align: right; |
|
||||
} |
|
||||
|
|
||||
.goods-name{ |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
/* 优惠券选择 */ |
|
||||
.popup__coupon { |
|
||||
width: 750rpx; |
|
||||
background: #fff; |
|
||||
box-sizing: border-box; |
|
||||
padding: 30rpx; |
|
||||
|
|
||||
.coupon__do_not { |
|
||||
.control { |
|
||||
width: 90%; |
|
||||
height: 72rpx; |
|
||||
margin-bottom: 24rpx; |
|
||||
color: #888; |
|
||||
border: 1rpx solid #e3e3e3; |
|
||||
border-radius: 10rpx; |
|
||||
/* #ifdef H5 */ |
|
||||
max-width: 1120rpx; |
|
||||
/* #endif */ |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.coupon__title { |
|
||||
text-align: center; |
|
||||
margin-bottom: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.coupon-list { |
|
||||
/* #ifdef H5 */ |
|
||||
max-width: 1120rpx; |
|
||||
margin: 0 auto; |
|
||||
/* #endif */ |
|
||||
} |
|
||||
|
|
||||
.coupon-item { |
|
||||
overflow: hidden; |
|
||||
margin-bottom: 22rpx; |
|
||||
} |
|
||||
|
|
||||
.item-wrapper { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
background: #fff; |
|
||||
border-radius: 8rpx; |
|
||||
color: #fff; |
|
||||
height: 180rpx; |
|
||||
|
|
||||
.coupon-type { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
z-index: 10; |
|
||||
width: 128rpx; |
|
||||
padding: 6rpx 0; |
|
||||
background: #a771ff; |
|
||||
font-size: 20rpx; |
|
||||
text-align: center; |
|
||||
color: #ffffff; |
|
||||
transform: rotate(45deg); |
|
||||
transform-origin: 64rpx 64rpx; |
|
||||
} |
|
||||
|
|
||||
&.color-blue { |
|
||||
background: linear-gradient(-125deg, #57bdbf, #2f9de2); |
|
||||
} |
|
||||
|
|
||||
&.color-red { |
|
||||
background: linear-gradient(-128deg, #ff6d6d, #ff3636); |
|
||||
} |
|
||||
|
|
||||
&.color-violet { |
|
||||
background: linear-gradient(-113deg, #ef86ff, #b66ff5); |
|
||||
|
|
||||
.coupon-type { |
|
||||
background: #55b5ff; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.color-yellow { |
|
||||
background: linear-gradient(-141deg, #f7d059, #fdb054); |
|
||||
} |
|
||||
|
|
||||
&.color-gray { |
|
||||
background: linear-gradient(-113deg, #bdbdbd, #a2a1a2); |
|
||||
|
|
||||
.coupon-type { |
|
||||
background: #9e9e9e; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1; |
|
||||
padding: 30rpx 20rpx; |
|
||||
border-radius: 16rpx 0 0 16rpx; |
|
||||
|
|
||||
.title { |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
|
|
||||
.bottom { |
|
||||
.time { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.receive { |
|
||||
height: 46rpx; |
|
||||
width: 122rpx; |
|
||||
line-height: 46rpx; |
|
||||
text-align: center; |
|
||||
border: 1rpx solid #fff; |
|
||||
border-radius: 30rpx; |
|
||||
color: #fff; |
|
||||
font-size: 24rpx; |
|
||||
|
|
||||
&.state { |
|
||||
border: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.tip { |
|
||||
position: relative; |
|
||||
flex: 0 0 32%; |
|
||||
text-align: center; |
|
||||
border-radius: 0 16rpx 16rpx 0; |
|
||||
|
|
||||
.money { |
|
||||
font-weight: bold; |
|
||||
font-size: 52rpx; |
|
||||
} |
|
||||
|
|
||||
.pay-line { |
|
||||
font-size: 22rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.split-line { |
|
||||
position: relative; |
|
||||
flex: 0 0 0; |
|
||||
border-left: 4rpx solid #fff; |
|
||||
margin: 0 10rpx 0 6rpx; |
|
||||
background: #fff; |
|
||||
|
|
||||
&:before, |
|
||||
{ |
|
||||
border-radius: 0 0 16rpx 16rpx; |
|
||||
top: 0; |
|
||||
} |
|
||||
|
|
||||
&:after { |
|
||||
border-radius: 16rpx 16rpx 0 0; |
|
||||
bottom: 0; |
|
||||
} |
|
||||
|
|
||||
&:before, |
|
||||
&:after { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
width: 24rpx; |
|
||||
height: 12rpx; |
|
||||
background: #f7f7f7; |
|
||||
left: -14rpx; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
/* 积分抵扣 */ |
|
||||
.points { |
|
||||
|
|
||||
.title { |
|
||||
margin-right: 5rpx; |
|
||||
} |
|
||||
|
|
||||
.icon-help { |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
.points-money { |
|
||||
margin-right: 20rpx; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
/* 支付方式 */ |
|
||||
.pay-method { |
|
||||
|
|
||||
.pay-item { |
|
||||
padding: 24rpx 0; |
|
||||
font-size: 28rpx; |
|
||||
border-bottom: 1rpx solid rgb(248, 248, 248); |
|
||||
|
|
||||
.item-left_icon { |
|
||||
margin-right: 20rpx; |
|
||||
font-size: 32rpx; |
|
||||
|
|
||||
&.wechat { |
|
||||
color: #00c800; |
|
||||
} |
|
||||
|
|
||||
&.balance { |
|
||||
color: #ff9700; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.user-balance { |
|
||||
margin-left: 20rpx; |
|
||||
font-size: 26rpx; |
|
||||
// color: #464646; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 商品规格 |
|
||||
.goods-props { |
|
||||
padding-top: 10rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
float: left; |
|
||||
.group-name { |
|
||||
margin-right: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 右侧箭头 |
|
||||
.right-arrow { |
|
||||
margin-left: 16rpx; |
|
||||
// color: #777; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
|
|
||||
// 底部操作栏 |
|
||||
.flow-fixed-footer { |
|
||||
position: fixed; |
|
||||
bottom: var(--window-bottom); |
|
||||
left: var(--window-left); |
|
||||
right: var(--window-right); |
|
||||
// width: 100%; |
|
||||
background: #fff; |
|
||||
border-top: 1px solid #eee; |
|
||||
z-index: 11; |
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + var(--window-bottom)); |
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + var(--window-bottom)); |
|
||||
|
|
||||
.chackout-left { |
|
||||
font-size: 28rpx; |
|
||||
line-height: 92rpx; |
|
||||
color: #777; |
|
||||
flex: 4; |
|
||||
padding-left: 12px; |
|
||||
} |
|
||||
|
|
||||
.chackout-right { |
|
||||
font-size: 34rpx; |
|
||||
flex: 2; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
// 提交按钮 |
|
||||
.flow-btn { |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
line-height: 92rpx; |
|
||||
display: block; |
|
||||
font-size: 28rpx; |
|
||||
// 禁用按钮 |
|
||||
&.disabled { |
|
||||
background: #ff9779; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 积分说明 |
|
||||
.points-content { |
|
||||
padding: 30rpx 48rpx; |
|
||||
font-size: 28rpx; |
|
||||
line-height: 50rpx; |
|
||||
text-align: left; |
|
||||
color: #606266; |
|
||||
height: 620rpx; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
/* 共几件商品 */ |
|
||||
.flow-num-box { |
|
||||
font-size: 28rpx; |
|
||||
color: #777; |
|
||||
padding: 16rpx 24rpx; |
|
||||
text-align: right; |
|
||||
} |
|
||||
|
|
||||
/* app.scss */ |
|
||||
.flow-shopList { |
|
||||
padding: 18rpx 0; |
|
||||
|
|
||||
.flow-list-left { |
|
||||
margin-right: 20rpx; |
|
||||
|
|
||||
image { |
|
||||
width: 180rpx; |
|
||||
height: 180rpx; |
|
||||
border: 1rpx solid #eee; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.flow-list-right { |
|
||||
|
|
||||
.flow-cont { |
|
||||
font-size: 28rpx; |
|
||||
color: #fa2209; |
|
||||
} |
|
||||
|
|
||||
.small { |
|
||||
font-size: 26rpx; |
|
||||
color: #777; |
|
||||
} |
|
||||
|
|
||||
.flow-list-cont { |
|
||||
padding-top: 10rpx; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.flow-all-money { |
|
||||
padding: 0 24rpx; |
|
||||
color: #444; |
|
||||
|
|
||||
.flow-all-list { |
|
||||
font-size: 28rpx; |
|
||||
padding: 20rpx 0; |
|
||||
border-bottom: 1rpx solid rgb(248, 248, 248); |
|
||||
} |
|
||||
|
|
||||
.flow-all-list:last-child { |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
|
|
||||
.flow-all-list-cont { |
|
||||
font-size: 28rpx; |
|
||||
padding: 10rpx 0; |
|
||||
} |
|
||||
|
|
||||
.flow-arrow { |
|
||||
justify-content: flex-end; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,274 +0,0 @@ |
|||||
<template> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback"> |
|
||||
<!-- tab栏 --> |
|
||||
<u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" /> |
|
||||
|
|
||||
<!-- 商品评价列表 --> |
|
||||
<view class="comment-list"> |
|
||||
<view class="comment-item" v-for="(item, index) in list.data" :key="index"> |
|
||||
<view class="item-head"> |
|
||||
<!-- 用户信息 --> |
|
||||
<view class="user-info"> |
|
||||
<avatar-image class="user-avatar" :url="item.user.avatar_url" :width="50" /> |
|
||||
<text class="user-name f-26">{{ item.user.nick_name }}</text> |
|
||||
</view> |
|
||||
<!-- 评星 --> |
|
||||
<u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" /> |
|
||||
<!-- 评价日期--> |
|
||||
<view class="flex-box f-22 col-9 t-r">{{ item.create_time }}</view> |
|
||||
</view> |
|
||||
<!-- 评价内容 --> |
|
||||
<view class="item-content m-top20"> |
|
||||
<text class="f-26">{{ item.content }}</text> |
|
||||
</view> |
|
||||
<!-- 评价图片 --> |
|
||||
<view class="images-list clearfix" v-if="item.images.length"> |
|
||||
<view class="image-preview" v-for="(image, imgIdx) in item.images" :key="imgIdx"> |
|
||||
<image class="image" mode="aspectFill" :src="image.image_url" @click="onPreviewImages(index, imgIdx)"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 商品规格 --> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in item.orderGoods.goods_props" :key="idx"> |
|
||||
<text class="group-name">{{ props.group.name }}: </text> |
|
||||
<text>{{ props.value.name }}；</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import AvatarImage from '@/components/avatar-image' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
import * as CommentApi from '@/api/comment' |
|
||||
|
|
||||
const pageSize = 15 |
|
||||
const tabs = [{ |
|
||||
name: `全部`, |
|
||||
scoreType: -1 |
|
||||
}, { |
|
||||
name: `好评`, |
|
||||
scoreType: 10 |
|
||||
}, { |
|
||||
name: `中评`, |
|
||||
scoreType: 20 |
|
||||
}, { |
|
||||
name: `差评`, |
|
||||
scoreType: 30 |
|
||||
}] |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody, |
|
||||
AvatarImage |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 当前商品ID |
|
||||
goodsId: null, |
|
||||
// 当前标签索引 |
|
||||
curTab: 0, |
|
||||
// 评价列表数据 |
|
||||
list: getEmptyPaginateObj(), |
|
||||
// 评价总数量 |
|
||||
total: { all: 0, negative: 0, praise: 0, review: 0 }, |
|
||||
// 评星数据转换 |
|
||||
rates: { 10: 5, 20: 3, 30: 1 }, |
|
||||
// 标签栏数据 |
|
||||
tabs, |
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于4条才显示无更多数据 |
|
||||
noMoreSize: 4, |
|
||||
// 空布局 |
|
||||
empty: { |
|
||||
tip: '亲，暂无相关商品评价' |
|
||||
} |
|
||||
}, |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 记录属性值 |
|
||||
this.goodsId = options.goodsId |
|
||||
// 获取指定评分总数 |
|
||||
this.getTotal() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getCommentList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
// 加载评价列表数据 |
|
||||
getCommentList(pageNo = 1) { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
CommentApi.list(app.goodsId, { scoreType: app.getScoreType(), page: pageNo }, { load: false }) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = result.data.list |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 评分类型 |
|
||||
getScoreType() { |
|
||||
return this.tabs[this.curTab].scoreType |
|
||||
}, |
|
||||
|
|
||||
// 获取指定评分总数 |
|
||||
getTotal() { |
|
||||
const app = this |
|
||||
CommentApi.total(app.goodsId) |
|
||||
.then(result => { |
|
||||
// tab标签内容 |
|
||||
const total = result.data.total |
|
||||
app.getTabs(total) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取tab标签内容 |
|
||||
getTabs(total) { |
|
||||
const tabs = this.tabs |
|
||||
tabs[0].name = `全部(${total.all})` |
|
||||
tabs[1].name = `好评(${total.praise})` |
|
||||
tabs[2].name = `中评(${total.review})` |
|
||||
tabs[3].name = `差评(${total.negative})` |
|
||||
}, |
|
||||
|
|
||||
// 切换标签项 |
|
||||
onChangeTab(index) { |
|
||||
const app = this |
|
||||
// 设置当前选中的标签 |
|
||||
app.curTab = index |
|
||||
// 刷新评价列表 |
|
||||
app.onRefreshList() |
|
||||
}, |
|
||||
|
|
||||
// 刷新评价列表 |
|
||||
onRefreshList() { |
|
||||
this.list = getEmptyPaginateObj() |
|
||||
setTimeout(() => { |
|
||||
this.mescroll.resetUpScroll() |
|
||||
}, 120) |
|
||||
}, |
|
||||
|
|
||||
// 预览评价图片 |
|
||||
onPreviewImages(dataIdx, imgIndex) { |
|
||||
const app = this |
|
||||
const images = app.list.data[dataIdx].images |
|
||||
const imageUrls = images.map(item => item.image_url) |
|
||||
uni.previewImage({ |
|
||||
current: imageUrls[imgIndex], |
|
||||
urls: imageUrls |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.comment-item { |
|
||||
padding: 30rpx; |
|
||||
box-sizing: border-box; |
|
||||
border-bottom: 1rpx solid #f7f7f7; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.item-head { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
// 用户信息 |
|
||||
.user-info { |
|
||||
margin-right: 15rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.user-avatar { |
|
||||
margin-right: 15rpx; |
|
||||
} |
|
||||
|
|
||||
.user-name { |
|
||||
color: #999; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 评价内容 |
|
||||
.item-content { |
|
||||
font-size: 30rpx; |
|
||||
color: #333; |
|
||||
margin: 16rpx 0; |
|
||||
} |
|
||||
|
|
||||
// 评价图片 |
|
||||
.images-list { |
|
||||
&::after { |
|
||||
clear: both; |
|
||||
content: " "; |
|
||||
display: table; |
|
||||
} |
|
||||
|
|
||||
.image-preview { |
|
||||
float: left; |
|
||||
margin-bottom: 15rpx; |
|
||||
margin-right: 15rpx; |
|
||||
|
|
||||
&:nth-child(3n+0) { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 220rpx; |
|
||||
height: 220rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品规格 |
|
||||
.goods-props { |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
float: left; |
|
||||
|
|
||||
.group-name { |
|
||||
margin-right: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,250 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<view v-if="list.length" class="coupon-list"> |
|
||||
<view class="coupon-item" v-for="(item, index) in list" :key="index"> |
|
||||
<view class="item-wrapper" |
|
||||
:class="[ item.state.value ? 'color-' + color[index % color.length] : 'color-gray' ]"> |
|
||||
<view class="coupon-type">{{ CouponTypeEnum[item.coupon_type].name }}</view> |
|
||||
<view class="tip dis-flex flex-dir-column flex-x-center"> |
|
||||
<view v-if="item.coupon_type == CouponTypeEnum.FULL_DISCOUNT.value"> |
|
||||
<text class="f-30">￥</text> |
|
||||
<text class="money">{{ item.reduce_price }}</text> |
|
||||
</view> |
|
||||
<text class="money" v-if="item.coupon_type == CouponTypeEnum.DISCOUNT.value">{{ item.discount }}折</text> |
|
||||
<text class="pay-line">满{{ item.min_price }}元可用</text> |
|
||||
</view> |
|
||||
<view class="split-line"></view> |
|
||||
<view class="content dis-flex flex-dir-column flex-x-between"> |
|
||||
<view class="title oneline-hide">{{ item.name }}</view> |
|
||||
<view class="bottom dis-flex flex-y-center"> |
|
||||
<view class="time flex-box"> |
|
||||
<text v-if="item.expire_type == 10">领取{{ item.expire_day }}天内有效</text> |
|
||||
<text v-if="item.expire_type == 20"> |
|
||||
<block v-if="item.start_time === item.end_time">{{ item.start_time }} 当天有效</block> |
|
||||
<block v-else>{{ item.start_time }}~{{ item.end_time }}</block> |
|
||||
</text> |
|
||||
</view> |
|
||||
<view class="receive" v-if="item.state.value" @click="receive(item.coupon_id)"> |
|
||||
<text>立即领取</text> |
|
||||
</view> |
|
||||
<view v-else class="receive state"> |
|
||||
<text>{{ item.state.text }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<empty v-if="!list.length" :isLoading="isLoading" /> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as CouponApi from '@/api/coupon' |
|
||||
import * as MyCouponApi from '@/api/myCoupon' |
|
||||
import { CouponTypeEnum } from '@/common/enum/coupon' |
|
||||
import Empty from '@/components/empty' |
|
||||
|
|
||||
const color = ['red', 'blue', 'violet', 'yellow'] |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Empty |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
CouponTypeEnum, |
|
||||
// 颜色组 |
|
||||
color, |
|
||||
// 优惠券列表 |
|
||||
list: [], |
|
||||
// 正在加载中 |
|
||||
isLoading: true |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 获取优惠券列表 |
|
||||
this.getCouponList() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 获取优惠券列表 |
|
||||
* @param {bool} load 是否显示loading弹窗 |
|
||||
*/ |
|
||||
getCouponList(load = true) { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
CouponApi.list({}, { load }) |
|
||||
.then(result => { |
|
||||
app.list = result.data.list |
|
||||
}) |
|
||||
.finally(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
// 立即领取 |
|
||||
receive(couponId) { |
|
||||
const app = this |
|
||||
MyCouponApi.receive(couponId) |
|
||||
.then(result => { |
|
||||
// 显示领取成功提示 |
|
||||
app.$success(result.message) |
|
||||
// 刷新优惠券列表 |
|
||||
app.getCouponList(false) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.coupon-list { |
|
||||
padding: 20rpx; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.coupon-item { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
margin-bottom: 22rpx; |
|
||||
} |
|
||||
|
|
||||
.item-wrapper { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
background: #fff; |
|
||||
border-radius: 8rpx; |
|
||||
color: #fff; |
|
||||
height: 180rpx; |
|
||||
|
|
||||
.coupon-type { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
z-index: 10; |
|
||||
width: 128rpx; |
|
||||
padding: 3px 0; |
|
||||
background: #a771ff; |
|
||||
font-size: 20rpx; |
|
||||
text-align: center; |
|
||||
color: #ffffff; |
|
||||
transform: rotate(45deg); |
|
||||
transform-origin: 64rpx 64rpx; |
|
||||
} |
|
||||
|
|
||||
&.color-blue { |
|
||||
background: linear-gradient(-125deg, #57bdbf, #2f9de2); |
|
||||
} |
|
||||
|
|
||||
&.color-red { |
|
||||
background: linear-gradient(-128deg, #ff6d6d, #ff3636); |
|
||||
} |
|
||||
|
|
||||
&.color-violet { |
|
||||
background: linear-gradient(-113deg, #ef86ff, #b66ff5); |
|
||||
|
|
||||
.coupon-type { |
|
||||
background: #55b5ff; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.color-yellow { |
|
||||
background: linear-gradient(-141deg, #f7d059, #fdb054); |
|
||||
} |
|
||||
|
|
||||
&.color-gray { |
|
||||
background: linear-gradient(-113deg, #bdbdbd, #a2a1a2); |
|
||||
|
|
||||
.coupon-type { |
|
||||
background: #9e9e9e; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1; |
|
||||
padding: 30rpx 20rpx; |
|
||||
border-radius: 8px 0 0 8px; |
|
||||
|
|
||||
.title { |
|
||||
width: 400rpx; |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
|
|
||||
.bottom { |
|
||||
.time { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.receive { |
|
||||
height: 46rpx; |
|
||||
width: 122rpx; |
|
||||
line-height: 46rpx; |
|
||||
text-align: center; |
|
||||
border: 1px solid #fff; |
|
||||
border-radius: 30rpx; |
|
||||
color: #fff; |
|
||||
font-size: 24rpx; |
|
||||
|
|
||||
&.state { |
|
||||
border: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.tip { |
|
||||
position: relative; |
|
||||
flex: 0 0 32%; |
|
||||
text-align: center; |
|
||||
border-radius: 0 8px 8px 0; |
|
||||
|
|
||||
.money { |
|
||||
font-weight: bold; |
|
||||
font-size: 52rpx; |
|
||||
} |
|
||||
|
|
||||
.pay-line { |
|
||||
font-size: 22rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.split-line { |
|
||||
position: relative; |
|
||||
flex: 0 0 0; |
|
||||
border-left: 4rpx solid #fff; |
|
||||
margin: 0 5px 0 3px; |
|
||||
background: #fff; |
|
||||
|
|
||||
&:before, |
|
||||
{ |
|
||||
border-radius: 0 0 16rpx 16rpx; |
|
||||
top: 0; |
|
||||
} |
|
||||
|
|
||||
&:after { |
|
||||
border-radius: 16rpx 16rpx 0 0; |
|
||||
bottom: 0; |
|
||||
} |
|
||||
|
|
||||
&:before, |
|
||||
&:after { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
width: 24rpx; |
|
||||
height: 12rpx; |
|
||||
background: #f7f7f7; |
|
||||
left: -14rpx; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,120 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<!-- 店铺页面组件 --> |
|
||||
<Page :items="items" /> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as Api from '@/api/page' |
|
||||
import Page from '@/components/page' |
|
||||
|
|
||||
const App = getApp() |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
Page |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 页面参数 |
|
||||
options: {}, |
|
||||
// 页面属性 |
|
||||
page: {}, |
|
||||
// 页面元素 |
|
||||
items: [] |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 当前页面参数 |
|
||||
this.options = options |
|
||||
// 加载页面数据 |
|
||||
this.getPageData() |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 加载页面数据 |
|
||||
* @param {Object} callback |
|
||||
*/ |
|
||||
getPageData(callback) { |
|
||||
const app = this |
|
||||
const pageId = app.options.pageId || 0 |
|
||||
Api.detail(pageId) |
|
||||
.then(result => { |
|
||||
// 设置页面数据 |
|
||||
const { data: { pageData } } = result |
|
||||
app.page = pageData.page |
|
||||
app.items = pageData.items |
|
||||
// 设置顶部导航栏栏 |
|
||||
app.setPageBar(); |
|
||||
}) |
|
||||
.finally(() => callback && callback()) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 设置顶部导航栏 |
|
||||
*/ |
|
||||
setPageBar() { |
|
||||
const { page } = this |
|
||||
// 设置页面标题 |
|
||||
uni.setNavigationBarTitle({ |
|
||||
title: page.params.title |
|
||||
}) |
|
||||
// 设置navbar标题、颜色 |
|
||||
uni.setNavigationBarColor({ |
|
||||
frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000', |
|
||||
backgroundColor: page.style.titleBackgroundColor |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 下拉刷新 |
|
||||
*/ |
|
||||
onPullDownRefresh() { |
|
||||
// 获取首页数据 |
|
||||
this.getPageData(() => { |
|
||||
uni.stopPullDownRefresh() |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 分享当前页面 |
|
||||
*/ |
|
||||
onShareAppMessage() { |
|
||||
const app = this |
|
||||
const { page } = app |
|
||||
return { |
|
||||
title: page.params.share_title, |
|
||||
path: "/pages/index/index?" + app.$getShareUrlParams() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 分享到朋友圈 |
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta) |
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html |
|
||||
*/ |
|
||||
onShareTimeline() { |
|
||||
const app = this |
|
||||
const { page } = app |
|
||||
return { |
|
||||
title: page.params.share_title, |
|
||||
path: "/pages/index/index?" + app.$getShareUrlParams() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.container { |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,162 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 商品评价 --> |
|
||||
<view v-if="!isLoading && list.length" class="goods-comment m-top20"> |
|
||||
<view class="item-title dis-flex"> |
|
||||
<view class="block-left flex-box"> |
|
||||
商品评价 (<text class="total">{{ total }}条</text>) |
|
||||
</view> |
|
||||
<view class="block-right"> |
|
||||
<text @click="onTargetToComment" class="show-more col-9">查看更多</text> |
|
||||
<text class="iconfont icon-arrow-right"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 评论列表 --> |
|
||||
<view class="comment-list"> |
|
||||
<view class="comment-item" v-for="(item, index) in list" :key="index"> |
|
||||
<view class="comment-item_row dis-flex flex-y-center"> |
|
||||
<view class="user-info dis-flex flex-y-center"> |
|
||||
<avatar-image class="user-avatar" :url="item.user.avatar_url" :width="50" /> |
|
||||
<text class="user-name">{{ item.user.nick_name }}</text> |
|
||||
</view> |
|
||||
<!-- 评星 --> |
|
||||
<view class="star-rating"> |
|
||||
<u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" /> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item-content m-top20"> |
|
||||
<text class="f-26 twoline-hide">{{ item.content }}</text> |
|
||||
</view> |
|
||||
<view class="comment-time">{{ item.create_time }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import AvatarImage from '@/components/avatar-image' |
|
||||
import * as CommentApi from '@/api/comment' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
AvatarImage |
|
||||
}, |
|
||||
props: { |
|
||||
// 商品ID |
|
||||
goodsId: { |
|
||||
type: Number, |
|
||||
default: null |
|
||||
}, |
|
||||
// 加载多少条记录 默认2条 |
|
||||
limit: { |
|
||||
type: Number, |
|
||||
default: 2 |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 评星数据转换 |
|
||||
rates: { 10: 5, 20: 3, 30: 1 }, |
|
||||
// 评价列表数据 |
|
||||
list: [], |
|
||||
// 评价总数量 |
|
||||
total: 0 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
created() { |
|
||||
// 加载评价列表数据 |
|
||||
this.getCommentList() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 加载评价列表数据 |
|
||||
getCommentList() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
CommentApi.listRows(app.goodsId, app.limit) |
|
||||
.then(result => { |
|
||||
app.list = result.data.list |
|
||||
app.total = result.data.total |
|
||||
}) |
|
||||
.catch(err => err) |
|
||||
.finally(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
// 跳转到评论列表页 |
|
||||
onTargetToComment() { |
|
||||
const app = this |
|
||||
app.$navTo('pages/comment/index', { goodsId: app.goodsId }) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.goods-comment { |
|
||||
padding: 20rpx 30rpx; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
|
|
||||
.item-title { |
|
||||
font-size: 28rpx; |
|
||||
margin-bottom: 25rpx; |
|
||||
|
|
||||
.total { |
|
||||
margin: 0 4rpx; |
|
||||
} |
|
||||
|
|
||||
.show-more { |
|
||||
margin-right: 8rpx; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.comment-item { |
|
||||
padding: 15rpx 5rpx; |
|
||||
margin-bottom: 10rpx; |
|
||||
border-bottom: 1rpx solid #f5f5f5; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
|
|
||||
.comment-item_row { |
|
||||
margin-bottom: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.user-info { |
|
||||
margin-right: 15rpx; |
|
||||
|
|
||||
.user-avatar { |
|
||||
width: 50rpx; |
|
||||
height: 50rpx; |
|
||||
border-radius: 50%; |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
|
|
||||
.user-name { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.item-content { |
|
||||
color: #333; |
|
||||
margin: 16rpx 0; |
|
||||
max-height: 76rpx; |
|
||||
line-height: 38rpx; |
|
||||
} |
|
||||
|
|
||||
.comment-time { |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
margin-top: 10rpx; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,158 +0,0 @@ |
|||||
<template> |
|
||||
<view v-if="list.length" class="service-wrapper"> |
|
||||
<!-- 服务简述 --> |
|
||||
<view class="service-simple" @click="handlePopup"> |
|
||||
<view class="s-list"> |
|
||||
<view class="s-item" v-for="(item, index) in list" :key="index"> |
|
||||
<text class="item-icon iconfont icon-fuwu"></text> |
|
||||
<text class="item-val">{{ item.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 扩展箭头 --> |
|
||||
<view class="s-arrow f-26 col-9 t-r"> |
|
||||
<text class="iconfont icon-arrow-right"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 详情内容弹窗 --> |
|
||||
<u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26"> |
|
||||
<view class="service-content"> |
|
||||
<view class="title">服务</view> |
|
||||
<scroll-view class="content-scroll" :scroll-y="true"> |
|
||||
<view class="s-list clearfix"> |
|
||||
<view class="s-item" v-for="(item, index) in list" :key="index"> |
|
||||
<text class="item-icon iconfont icon-fuwu"></text> |
|
||||
<view class="item-val">{{ item.name }}</view> |
|
||||
<view class="item-summary">{{ item.summary }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
</u-popup> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as ServiceApi from '@/api/goods/service' |
|
||||
|
|
||||
export default { |
|
||||
props: { |
|
||||
// 商品ID |
|
||||
goodsId: { |
|
||||
type: Number, |
|
||||
default: null |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 显示详情内容弹窗 |
|
||||
showPopup: false, |
|
||||
// 服务列表数据 |
|
||||
list: [] |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
created() { |
|
||||
// 获取商品服务列表 |
|
||||
this.getServiceList() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取商品服务列表 |
|
||||
getServiceList() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
ServiceApi.list(app.goodsId) |
|
||||
.then(result => app.list = result.data.list) |
|
||||
.finally(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
// 显示弹窗 |
|
||||
handlePopup() { |
|
||||
this.showPopup = !this.showPopup |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.service-wrapper { |
|
||||
min-height: 24rpx; |
|
||||
margin-bottom: -24rpx; |
|
||||
} |
|
||||
|
|
||||
// 服务简述 |
|
||||
.service-simple { |
|
||||
padding: 24rpx 30rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.s-list { |
|
||||
flex: 1; |
|
||||
margin-left: -15rpx; |
|
||||
} |
|
||||
|
|
||||
.s-item { |
|
||||
float: left; |
|
||||
font-size: 26rpx; |
|
||||
margin: 8rpx 15rpx; |
|
||||
|
|
||||
.item-icon { |
|
||||
color: #FA2209; |
|
||||
} |
|
||||
|
|
||||
.item-val { |
|
||||
margin-left: 12rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 服务详细内容 |
|
||||
.service-content { |
|
||||
padding: 24rpx; |
|
||||
|
|
||||
.title { |
|
||||
font-size: 30rpx; |
|
||||
margin-bottom: 50rpx; |
|
||||
font-weight: bold; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.content-scroll { |
|
||||
min-height: 400rpx; |
|
||||
max-height: 760rpx; |
|
||||
} |
|
||||
|
|
||||
.s-list { |
|
||||
padding: 0 30rpx 0 80rpx; |
|
||||
} |
|
||||
|
|
||||
.s-item { |
|
||||
position: relative; |
|
||||
margin-bottom: 60rpx; |
|
||||
|
|
||||
.item-icon { |
|
||||
position: absolute; |
|
||||
top: 6rpx; |
|
||||
left: -50rpx; |
|
||||
color: #FA2209; |
|
||||
} |
|
||||
|
|
||||
.item-val { |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
.item-summary { |
|
||||
font-size: 26rpx; |
|
||||
margin-top: 20rpx; |
|
||||
color: #6d6d6d; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,173 +0,0 @@ |
|||||
<template> |
|
||||
<goods-sku-popup :value="value" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode" |
|
||||
:maskCloseAble="true" @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" |
|
||||
buyNowText="立即购买" /> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { setCartTotalNum } from '@/core/app' |
|
||||
import * as CartApi from '@/api/cart' |
|
||||
import GoodsSkuPopup from '@/components/goods-sku-popup' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
GoodsSkuPopup |
|
||||
}, |
|
||||
model: { |
|
||||
prop: 'value', |
|
||||
event: 'input' |
|
||||
}, |
|
||||
props: { |
|
||||
// true 组件显示 false 组件隐藏 |
|
||||
value: { |
|
||||
Type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买 |
|
||||
skuMode: { |
|
||||
type: Number, |
|
||||
default: 1 |
|
||||
}, |
|
||||
// 商品详情信息 |
|
||||
goods: { |
|
||||
type: Object, |
|
||||
default: {} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
goodsInfo: {} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
created() { |
|
||||
const app = this |
|
||||
const { goods } = app |
|
||||
app.goodsInfo = { |
|
||||
_id: goods.goods_id, |
|
||||
name: goods.goods_name, |
|
||||
goods_thumb: goods.goods_image, |
|
||||
sku_list: app.getSkuList(), |
|
||||
spec_list: app.getSpecList() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 监听组件显示隐藏 |
|
||||
onChangeValue(val) { |
|
||||
this.$emit('input', val) |
|
||||
}, |
|
||||
|
|
||||
// 整理商品SKU列表 |
|
||||
getSkuList() { |
|
||||
const app = this |
|
||||
const { goods: { goods_name, goods_image, skuList } } = app |
|
||||
const skuData = [] |
|
||||
skuList.forEach(item => { |
|
||||
skuData.push({ |
|
||||
_id: item.id, |
|
||||
goods_sku_id: item.goods_sku_id, |
|
||||
goods_id: item.goods_id, |
|
||||
goods_name: goods_name, |
|
||||
image: item.image_url ? item.image_url : goods_image, |
|
||||
price: item.goods_price * 100, |
|
||||
stock: item.stock_num, |
|
||||
spec_value_ids: item.spec_value_ids, |
|
||||
sku_name_arr: app.getSkuNameArr(item.spec_value_ids) |
|
||||
}) |
|
||||
}) |
|
||||
return skuData |
|
||||
}, |
|
||||
|
|
||||
// 获取sku记录的规格值列表 |
|
||||
getSkuNameArr(specValueIds) { |
|
||||
const app = this |
|
||||
const defaultData = ['默认'] |
|
||||
const skuNameArr = [] |
|
||||
if (specValueIds) { |
|
||||
specValueIds.forEach((valueId, groupIndex) => { |
|
||||
const specValueName = app.getSpecValueName(valueId, groupIndex) |
|
||||
skuNameArr.push(specValueName) |
|
||||
}) |
|
||||
} |
|
||||
return skuNameArr.length ? skuNameArr : defaultData |
|
||||
}, |
|
||||
|
|
||||
// 获取指定的规格值名称 |
|
||||
getSpecValueName(valueId, groupIndex) { |
|
||||
const app = this |
|
||||
const { goods: { specList } } = app |
|
||||
const res = specList[groupIndex].valueList.find(specValue => { |
|
||||
return specValue.spec_value_id == valueId |
|
||||
}) |
|
||||
return res.spec_value |
|
||||
}, |
|
||||
|
|
||||
// 整理规格数据 |
|
||||
getSpecList() { |
|
||||
const { goods: { specList } } = this |
|
||||
const defaultData = [{ name: '默认', list: [{ name: '默认' }] }] |
|
||||
const specData = [] |
|
||||
specList.forEach(group => { |
|
||||
const children = [] |
|
||||
group.valueList.forEach(specValue => { |
|
||||
children.push({ name: specValue.spec_value }) |
|
||||
}) |
|
||||
specData.push({ |
|
||||
name: group.spec_name, |
|
||||
list: children |
|
||||
}) |
|
||||
}) |
|
||||
return specData.length ? specData : defaultData |
|
||||
}, |
|
||||
|
|
||||
// sku组件 开始----------------------------------------------------------- |
|
||||
openSkuPopup() { |
|
||||
// console.log("监听 - 打开sku组件") |
|
||||
}, |
|
||||
|
|
||||
closeSkuPopup() { |
|
||||
// console.log("监听 - 关闭sku组件") |
|
||||
}, |
|
||||
|
|
||||
// 加入购物车按钮 |
|
||||
addCart(selectShop) { |
|
||||
const app = this |
|
||||
const { goods_id, goods_sku_id, buy_num } = selectShop |
|
||||
CartApi.add(goods_id, goods_sku_id, buy_num) |
|
||||
.then(result => { |
|
||||
// 显示成功 |
|
||||
app.$toast(result.message) |
|
||||
// 隐藏当前弹窗 |
|
||||
app.onChangeValue(false) |
|
||||
// 购物车商品总数量 |
|
||||
const cartTotal = result.data.cartTotal |
|
||||
// 缓存购物车数量 |
|
||||
setCartTotalNum(cartTotal) |
|
||||
// 传递给父级 |
|
||||
app.$emit('addCart', cartTotal) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 立即购买 |
|
||||
buyNow(selectShop) { |
|
||||
// 跳转到订单结算页 |
|
||||
this.$navTo('pages/checkout/index', { |
|
||||
mode: 'buyNow', |
|
||||
goodsId: selectShop.goods_id, |
|
||||
goodsSkuId: selectShop.goods_sku_id, |
|
||||
goodsNum: selectShop.buy_num |
|
||||
}) |
|
||||
// 隐藏当前弹窗 |
|
||||
this.onChangeValue(false) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,146 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="images-swiper"> |
|
||||
<swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots" |
|
||||
:interval="interval" :circular="true" @change="setCurrent"> |
|
||||
<!-- 主图视频 --> |
|
||||
<swiper-item v-if="video"> |
|
||||
<view class="slide-video"> |
|
||||
<video id="myVideo" class="video" :poster="videoCover.preview_url" :src="video.external_url" controls |
|
||||
x5-playsinline playsinline webkit-playsinline webkit-playsinline x5-video-player-type="h5" |
|
||||
x5-video-player-fullscreen x5-video-orientation="portrait" :enable-progress-gesture="false" |
|
||||
@play="onVideoPlay"></video> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
<!-- 轮播图片 --> |
|
||||
<swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)"> |
|
||||
<view class="slide-image"> |
|
||||
<image class="image" :draggable="false" :src="item.preview_url"></image> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
</swiper> |
|
||||
<view class="swiper-count"> |
|
||||
<text>{{ currentIndex }}</text> |
|
||||
<text>/</text> |
|
||||
<text>{{ images.length + (video ? 1 : 0) }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
// 主图视频 |
|
||||
video: { |
|
||||
type: Object, |
|
||||
default () { |
|
||||
return null |
|
||||
} |
|
||||
}, |
|
||||
// 主图视频封面 |
|
||||
videoCover: { |
|
||||
type: Object, |
|
||||
default () { |
|
||||
return null |
|
||||
} |
|
||||
}, |
|
||||
// 图片轮播 |
|
||||
images: { |
|
||||
type: Array, |
|
||||
default: [] |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
indicatorDots: true, // 是否显示面板指示点 |
|
||||
autoplay: true, // 是否自动切换 |
|
||||
interval: 4000, // 自动切换时间间隔 |
|
||||
duration: 800, // 滑动动画时长 |
|
||||
currentIndex: 1, // 轮播图指针 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 事件：视频开始播放 |
|
||||
onVideoPlay(e) { |
|
||||
this.autoplay = false |
|
||||
}, |
|
||||
|
|
||||
// 设置轮播图当前指针 数字 |
|
||||
setCurrent({ detail }) { |
|
||||
const app = this |
|
||||
app.currentIndex = detail.current + 1 |
|
||||
}, |
|
||||
|
|
||||
// 浏览商品图片 |
|
||||
onPreviewImages(index) { |
|
||||
const app = this |
|
||||
const imageUrls = [] |
|
||||
app.images.forEach(item => { |
|
||||
imageUrls.push(item.preview_url); |
|
||||
}); |
|
||||
uni.previewImage({ |
|
||||
current: imageUrls[index], |
|
||||
urls: imageUrls |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
// swiper组件 |
|
||||
.images-swiper { |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.swiper-box { |
|
||||
width: 100%; |
|
||||
height: 100vw; |
|
||||
|
|
||||
/* #ifdef H5 */ |
|
||||
max-width: 480px; |
|
||||
max-height: 480px; |
|
||||
margin: 0 auto; |
|
||||
/* #endif */ |
|
||||
|
|
||||
// 主图视频 |
|
||||
.slide-video { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
|
|
||||
.video { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 图片轮播 |
|
||||
.slide-image { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// swiper计数 |
|
||||
.swiper-count { |
|
||||
position: absolute; |
|
||||
right: 36rpx; |
|
||||
bottom: 72rpx; |
|
||||
padding: 2rpx 18rpx; |
|
||||
background: rgba(0, 0, 0, 0.363); |
|
||||
border-radius: 50rpx; |
|
||||
color: #fff; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,227 +0,0 @@ |
|||||
.container { |
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
// 110 - 18 + 4 |
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx); |
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx); |
|
||||
} |
|
||||
|
|
||||
// 商品信息 |
|
||||
.goods-info { |
|
||||
background: #fff; |
|
||||
padding: 25rpx 30rpx; |
|
||||
} |
|
||||
|
|
||||
.info-item__top { |
|
||||
min-height: 40rpx; |
|
||||
margin-bottom: 20rpx; |
|
||||
line-height: 1; |
|
||||
} |
|
||||
|
|
||||
.floor-price__samll { |
|
||||
font-size: 26rpx; |
|
||||
line-height: 1; |
|
||||
color: #FA2209; |
|
||||
margin-bottom: -10rpx; |
|
||||
} |
|
||||
|
|
||||
// 商品价 |
|
||||
.floor-price { |
|
||||
color: #FA2209; |
|
||||
margin-right: 15rpx; |
|
||||
font-size: 42rpx; |
|
||||
} |
|
||||
|
|
||||
.original-price { |
|
||||
font-size: 26rpx; |
|
||||
text-decoration: line-through; |
|
||||
color: #959595; |
|
||||
margin-right: 15rpx; |
|
||||
margin-bottom: -6rpx; |
|
||||
} |
|
||||
|
|
||||
// 会员价标签 |
|
||||
.user-grade { |
|
||||
background: #3c3c3c; |
|
||||
border-radius: 6rpx; |
|
||||
padding: 8rpx 14rpx; |
|
||||
margin-right: 15rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #EEE0C3; |
|
||||
} |
|
||||
|
|
||||
.goods-sales { |
|
||||
font-size: 24rpx; |
|
||||
color: #959595; |
|
||||
} |
|
||||
|
|
||||
.info-item__name .goods-name { |
|
||||
font-size: 30rpx; |
|
||||
} |
|
||||
|
|
||||
/* 商品分享 */ |
|
||||
|
|
||||
.goods-share__line { |
|
||||
border-left: 1rpx solid #f4f4f4; |
|
||||
height: 60rpx; |
|
||||
margin: 0 30rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-share .share-btn { |
|
||||
line-height: normal; |
|
||||
padding: 0; |
|
||||
background: none; |
|
||||
border-radius: 0; |
|
||||
box-shadow: none; |
|
||||
font-size: 8pt; |
|
||||
border: none; |
|
||||
color: #191919; |
|
||||
} |
|
||||
|
|
||||
.goods-share .share-btn::after { |
|
||||
border: none; |
|
||||
} |
|
||||
|
|
||||
.goods-share .share__icon { |
|
||||
font-size: 40rpx; |
|
||||
margin-bottom: 5rpx; |
|
||||
} |
|
||||
|
|
||||
// 商品卖点 |
|
||||
.info-item_selling-point { |
|
||||
margin-top: 8rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #808080; |
|
||||
} |
|
||||
|
|
||||
// 选择商品规格 |
|
||||
.goods-choice { |
|
||||
padding: 26rpx 30rpx; |
|
||||
font-size: 28rpx; |
|
||||
|
|
||||
.spec-list { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.spec-name { |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品详情 |
|
||||
.goods-content .item-title { |
|
||||
padding: 26rpx 30rpx; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
// 底部操作栏 |
|
||||
.footer-fixed { |
|
||||
position: fixed; |
|
||||
bottom: var(--window-bottom); |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
display: flex; |
|
||||
z-index: 11; |
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24); |
|
||||
background: #fff; |
|
||||
|
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: constant(safe-area-inset-bottom); |
|
||||
padding-bottom: env(safe-area-inset-bottom); |
|
||||
} |
|
||||
|
|
||||
.footer-container { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
height: 106rpx; |
|
||||
} |
|
||||
|
|
||||
// 快捷菜单 |
|
||||
.foo-item-fast { |
|
||||
box-sizing: border-box; |
|
||||
min-width: 214rpx; |
|
||||
line-height: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-evenly; |
|
||||
margin-right: 12rpx; |
|
||||
|
|
||||
.fast-item { |
|
||||
position: relative; |
|
||||
padding: 4rpx 0; |
|
||||
line-height: 1; |
|
||||
text-align: center; |
|
||||
width: 84rpx; |
|
||||
|
|
||||
&--cart { |
|
||||
margin-left: 6rpx; |
|
||||
.fast-icon { margin-left: -12rpx; } |
|
||||
} |
|
||||
|
|
||||
// 角标 |
|
||||
.fast-badge { |
|
||||
display: inline-block; |
|
||||
box-sizing: border-box; |
|
||||
min-width: 16px; |
|
||||
padding: 0 3px; |
|
||||
color: #fff; |
|
||||
font-weight: 500; |
|
||||
font-size: 12px; |
|
||||
font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif; |
|
||||
line-height: 1.2; |
|
||||
text-align: center; |
|
||||
background-color: #ee0a24; |
|
||||
border: 1px solid #fff; |
|
||||
border-radius: 999px; |
|
||||
} |
|
||||
|
|
||||
.fast-badge--fixed { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
transform-origin: 100% |
|
||||
} |
|
||||
|
|
||||
.fast-icon { |
|
||||
font-size: 44rpx; |
|
||||
margin-bottom: 8rpx; |
|
||||
} |
|
||||
|
|
||||
.fast-text { |
|
||||
font-size: 22rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 操作按钮 |
|
||||
.foo-item-btn { |
|
||||
flex: 1; |
|
||||
|
|
||||
.btn-wrapper { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.btn-item { |
|
||||
flex: 1; |
|
||||
font-size: 28rpx; |
|
||||
height: 72rpx; |
|
||||
margin-right: 16rpx; |
|
||||
color: #fff; |
|
||||
border-radius: 50rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
// 立即购买按钮 |
|
||||
.btn-item-main { |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
} |
|
||||
|
|
||||
// 购物车按钮 |
|
||||
.btn-item-deputy { |
|
||||
background: linear-gradient(to right, #ffa600, #ffbb00); |
|
||||
} |
|
||||
} |
|
||||
@ -1,290 +0,0 @@ |
|||||
<template> |
|
||||
<view v-show="!isLoading" class="container"> |
|
||||
<!-- 商品图片轮播 --> |
|
||||
<SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" /> |
|
||||
|
|
||||
<!-- 商品信息 --> |
|
||||
<view v-if="!isLoading" class="goods-info m-top20"> |
|
||||
<!-- 价格、销量 --> |
|
||||
<view class="info-item info-item__top dis-flex flex-x-between flex-y-end"> |
|
||||
<view class="block-left dis-flex flex-y-center"> |
|
||||
<!-- 商品售价 --> |
|
||||
<text class="floor-price__samll">￥</text> |
|
||||
<text class="floor-price">{{ goods.goods_price_min }}</text> |
|
||||
<!-- 会员价标签 --> |
|
||||
<view v-if="goods.is_user_grade" class="user-grade"> |
|
||||
<text>会员价</text> |
|
||||
</view> |
|
||||
<!-- 划线价 --> |
|
||||
<text v-if="goods.line_price_min > 0" class="original-price">￥{{ goods.line_price_min }}</text> |
|
||||
</view> |
|
||||
<view class="block-right dis-flex"> |
|
||||
<!-- 销量 --> |
|
||||
<view class="goods-sales"> |
|
||||
<text>已售{{ goods.goods_sales }}件</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 标题、分享 --> |
|
||||
<view class="info-item info-item__name dis-flex flex-y-center"> |
|
||||
<view class="goods-name flex-box"> |
|
||||
<text class="twoline-hide">{{ goods.goods_name }}</text> |
|
||||
</view> |
|
||||
<!-- #ifdef MP-WEIXIN --> |
|
||||
<view class="goods-share__line"></view> |
|
||||
<view class="goods-share"> |
|
||||
<button class="share-btn dis-flex flex-dir-column" open-type="share"> |
|
||||
<text class="share__icon iconfont icon-fenxiang"></text> |
|
||||
<text class="f-24">分享</text> |
|
||||
</button> |
|
||||
</view> |
|
||||
<!-- #endif --> |
|
||||
</view> |
|
||||
<!-- 商品卖点 --> |
|
||||
<view v-if="goods.selling_point" class="info-item info-item_selling-point"> |
|
||||
<text>{{ goods.selling_point }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 选择商品规格 --> |
|
||||
<view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)"> |
|
||||
<view class="spec-list"> |
|
||||
<view class="flex-box"> |
|
||||
<text class="col-8">选择：</text> |
|
||||
<text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text> |
|
||||
</view> |
|
||||
<view class="f-26 col-9 t-r"> |
|
||||
<text class="iconfont icon-arrow-right"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品服务 --> |
|
||||
<Service v-if="!isLoading" :goods-id="goodsId" /> |
|
||||
|
|
||||
<!-- 商品SKU弹窗 --> |
|
||||
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" /> |
|
||||
|
|
||||
<!-- 商品评价 --> |
|
||||
<Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" /> |
|
||||
|
|
||||
<!-- 商品描述 --> |
|
||||
<view v-if="!isLoading" class="goods-content m-top20"> |
|
||||
<view class="item-title b-f"> |
|
||||
<text>商品描述</text> |
|
||||
</view> |
|
||||
<block v-if="goods.content != ''"> |
|
||||
<view class="goods-content__detail b-f"> |
|
||||
<mp-html :content="goods.content" /> |
|
||||
</view> |
|
||||
</block> |
|
||||
<empty v-else tips="亲，暂无商品描述" /> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 底部选项卡 --> |
|
||||
<view class="footer-fixed"> |
|
||||
<view class="footer-container"> |
|
||||
<!-- 导航图标 --> |
|
||||
<view class="foo-item-fast"> |
|
||||
<!-- 首页 --> |
|
||||
<view class="fast-item fast-item--home" @click="onTargetHome"> |
|
||||
<view class="fast-icon"> |
|
||||
<text class="iconfont icon-shouye"></text> |
|
||||
</view> |
|
||||
<view class="fast-text"> |
|
||||
<text>首页</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 客服 (仅微信小程序端显示) --> |
|
||||
<!-- #ifdef MP-WEIXIN --> |
|
||||
<button class="btn-normal" open-type="contact"> |
|
||||
<view class="fast-item"> |
|
||||
<view class="fast-icon"> |
|
||||
<text class="iconfont icon-kefu1"></text> |
|
||||
</view> |
|
||||
<view class="fast-text"> |
|
||||
<text>客服</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</button> |
|
||||
<!-- #endif --> |
|
||||
<!-- 购物车 --> |
|
||||
<view class="fast-item fast-item--cart" @click="onTargetCart"> |
|
||||
<view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }} |
|
||||
</view> |
|
||||
<view class="fast-icon"> |
|
||||
<text class="iconfont icon-gouwuche"></text> |
|
||||
</view> |
|
||||
<view class="fast-text"> |
|
||||
<text>购物车</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 操作按钮 --> |
|
||||
<view class="foo-item-btn"> |
|
||||
<view class="btn-wrapper"> |
|
||||
<view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)"> |
|
||||
<text>加入购物车</text> |
|
||||
</view> |
|
||||
<view class="btn-item btn-item-main" @click="onShowSkuPopup(3)"> |
|
||||
<text>立即购买</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 快捷导航 --> |
|
||||
<!-- <shortcut bottom="120rpx" /> --> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as GoodsApi from '@/api/goods' |
|
||||
import * as CartApi from '@/api/cart' |
|
||||
// import Shortcut from '@/components/shortcut' |
|
||||
import SlideImage from './components/SlideImage' |
|
||||
import SkuPopup from './components/SkuPopup' |
|
||||
import Comment from './components/Comment' |
|
||||
import Service from './components/Service' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
// Shortcut, |
|
||||
SlideImage, |
|
||||
SkuPopup, |
|
||||
Comment, |
|
||||
Service |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 当前商品ID |
|
||||
goodsId: null, |
|
||||
// 商品详情 |
|
||||
goods: {}, |
|
||||
// 购物车总数量 |
|
||||
cartTotal: 0, |
|
||||
// 显示/隐藏SKU弹窗 |
|
||||
showSkuPopup: false, |
|
||||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买 |
|
||||
skuMode: 1 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 记录商品ID |
|
||||
this.goodsId = parseInt(options.goodsId) |
|
||||
// 加载页面数据 |
|
||||
this.onRefreshPage() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 刷新页面数据 |
|
||||
onRefreshPage() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
Promise.all([app.getGoodsDetail(), app.getCartTotal()]) |
|
||||
.finally(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
// 获取商品信息 |
|
||||
getGoodsDetail() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
GoodsApi.detail(app.goodsId) |
|
||||
.then(result => { |
|
||||
app.goods = result.data.detail |
|
||||
resolve(result) |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取购物车总数量 |
|
||||
getCartTotal() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
CartApi.total() |
|
||||
.then(result => { |
|
||||
app.cartTotal = result.data.cartTotal |
|
||||
resolve(result) |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 更新购物车数量 |
|
||||
onAddCart(total) { |
|
||||
this.cartTotal = total |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 显示/隐藏SKU弹窗 |
|
||||
* @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买 |
|
||||
*/ |
|
||||
onShowSkuPopup(skuMode = 1) { |
|
||||
this.skuMode = skuMode |
|
||||
this.showSkuPopup = !this.showSkuPopup |
|
||||
}, |
|
||||
|
|
||||
// 跳转到首页 |
|
||||
onTargetHome(e) { |
|
||||
this.$navTo('pages/index/index') |
|
||||
}, |
|
||||
|
|
||||
// 跳转到购物车页 |
|
||||
onTargetCart() { |
|
||||
this.$navTo('pages/cart/index') |
|
||||
}, |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 分享当前页面 |
|
||||
*/ |
|
||||
onShareAppMessage() { |
|
||||
const app = this |
|
||||
// 构建页面参数 |
|
||||
const params = app.$getShareUrlParams({ |
|
||||
goodsId: app.goodsId, |
|
||||
}) |
|
||||
return { |
|
||||
title: app.goods.goods_name, |
|
||||
path: `/pages/goods/detail?${params}` |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 分享到朋友圈 |
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta) |
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html |
|
||||
*/ |
|
||||
onShareTimeline() { |
|
||||
const app = this |
|
||||
// 构建页面参数 |
|
||||
const params = app.$getShareUrlParams({ |
|
||||
goodsId: app.goodsId, |
|
||||
}) |
|
||||
return { |
|
||||
title: app.goods.goods_name, |
|
||||
path: `/pages/goods/detail?${params}` |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
page { |
|
||||
background: #fafafa; |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss" scoped> |
|
||||
@import "./detail.scss"; |
|
||||
</style> |
|
||||
@ -1,463 +0,0 @@ |
|||||
<template> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback"> |
|
||||
<!-- 页面头部 --> |
|
||||
<view class="header"> |
|
||||
<search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" /> |
|
||||
<!-- 切换列表显示方式 --> |
|
||||
<view class="show-view" @click="handleShowView"> |
|
||||
<text class="iconfont icon-view-tile" v-if="showView"></text> |
|
||||
<text class="iconfont icon-view-list" v-else></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 排序标签 --> |
|
||||
<view class="store-sort"> |
|
||||
<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')"> |
|
||||
<text>综合</text> |
|
||||
</view> |
|
||||
<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')"> |
|
||||
<text>销量</text> |
|
||||
</view> |
|
||||
<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" @click="handleSortType('price')"> |
|
||||
<text>价格</text> |
|
||||
<view class="price-arrow"> |
|
||||
<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }"> |
|
||||
<text class="iconfont icon-arrow-up"></text> |
|
||||
</view> |
|
||||
<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }"> |
|
||||
<text class="iconfont icon-arrow-down"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品列表 --> |
|
||||
<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]"> |
|
||||
<view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_id)"> |
|
||||
<!-- 单列显示 --> |
|
||||
<view v-if="showView" class="dis-flex"> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="goods-item_left"> |
|
||||
<image class="image" :src="item.goods_image"></image> |
|
||||
</view> |
|
||||
<view class="goods-item_right"> |
|
||||
<!-- 商品名称 --> |
|
||||
<view class="goods-name"> |
|
||||
<text class="twoline-hide">{{ item.goods_name }}</text> |
|
||||
</view> |
|
||||
<view class="goods-item_desc"> |
|
||||
<!-- 商品卖点 --> |
|
||||
<view class="desc-selling_point dis-flex"> |
|
||||
<text class="oneline-hide">{{ item.selling_point }}</text> |
|
||||
</view> |
|
||||
<!-- 商品销量 --> |
|
||||
<view class="desc-goods_sales dis-flex"> |
|
||||
<text>已售{{ item.goods_sales }}件</text> |
|
||||
</view> |
|
||||
<!-- 商品价格 --> |
|
||||
<view class="desc_footer"> |
|
||||
<text class="price_x">¥{{ item.goods_price_min }}</text> |
|
||||
<text class="price_y col-9" v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 多列显示 --> |
|
||||
<view v-else class=""> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="goods-image"> |
|
||||
<image class="image" mode="aspectFill" :src="item.goods_image"></image> |
|
||||
</view> |
|
||||
<view class="detail"> |
|
||||
<!-- 商品标题 --> |
|
||||
<view class="goods-name"> |
|
||||
<text class="twoline-hide">{{ item.goods_name }}</text> |
|
||||
</view> |
|
||||
<!-- 商品价格 --> |
|
||||
<view class="detail-price oneline-hide"> |
|
||||
<text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text> |
|
||||
<text v-if="item.line_price_min > 0" class="line-price col-9 f-24">￥{{ item.line_price_min }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import * as GoodsApi from '@/api/goods' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
import Search from '@/components/search' |
|
||||
|
|
||||
const pageSize = 15 |
|
||||
const showViewKey = 'GoodsList-ShowView'; |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody, |
|
||||
Search |
|
||||
}, |
|
||||
|
|
||||
mixins: [MescrollMixin], |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
showView: false, // 列表显示方式 (true列表、false平铺) |
|
||||
sortType: 'all', // 排序类型 |
|
||||
sortPrice: false, // 价格排序 (true高到低 false低到高) |
|
||||
options: {}, // 当前页面参数 |
|
||||
list: getEmptyPaginateObj(), // 商品列表数据 |
|
||||
|
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于4条才显示无更多数据 |
|
||||
noMoreSize: 4, |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 记录options |
|
||||
this.options = options |
|
||||
// 设置默认列表显示方式 |
|
||||
this.setShowView() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getGoodsList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
// 设置默认列表显示方式 |
|
||||
setShowView() { |
|
||||
this.showView = uni.getStorageSync(showViewKey) || false |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 获取商品列表 |
|
||||
* @param {number} pageNo 页码 |
|
||||
*/ |
|
||||
getGoodsList(pageNo = 1) { |
|
||||
const app = this |
|
||||
console.log(app.options) |
|
||||
const param = { |
|
||||
sortType: app.sortType, |
|
||||
sortPrice: Number(app.sortPrice), |
|
||||
categoryId: app.options.categoryId || 0, |
|
||||
goodsName: app.options.search || '', |
|
||||
page: pageNo |
|
||||
} |
|
||||
return new Promise((resolve, reject) => { |
|
||||
GoodsApi.list(param) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = result.data.list |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 切换排序方式 |
|
||||
handleSortType(newSortType) { |
|
||||
const app = this |
|
||||
const newSortPrice = newSortType === 'price' ? !app.sortPrice : true |
|
||||
app.sortType = newSortType |
|
||||
app.sortPrice = newSortPrice |
|
||||
// 刷新列表数据 |
|
||||
app.list = getEmptyPaginateObj() |
|
||||
app.mescroll.resetUpScroll() |
|
||||
}, |
|
||||
|
|
||||
// 切换列表显示方式 |
|
||||
handleShowView() { |
|
||||
const app = this |
|
||||
app.showView = !app.showView |
|
||||
uni.setStorageSync(showViewKey, app.showView) |
|
||||
}, |
|
||||
|
|
||||
// 跳转商品详情页 |
|
||||
onTargetDetail(goodsId) { |
|
||||
this.$navTo('pages/goods/detail', { goodsId }) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 商品搜索 |
|
||||
*/ |
|
||||
handleSearch() { |
|
||||
const searchPageUrl = 'pages/search/index' |
|
||||
// 判断来源页面 |
|
||||
let pages = getCurrentPages() |
|
||||
if (pages.length > 1 && |
|
||||
pages[pages.length - 2].route === searchPageUrl) { |
|
||||
uni.navigateBack() |
|
||||
return |
|
||||
} |
|
||||
// 跳转到商品搜索页 |
|
||||
this.$navTo(searchPageUrl) |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 设置分享内容 |
|
||||
*/ |
|
||||
onShareAppMessage() { |
|
||||
// 构建分享参数 |
|
||||
return { |
|
||||
title: "全部分类", |
|
||||
path: "/pages/category/index?" + this.$getShareUrlParams() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 分享到朋友圈 |
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta) |
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html |
|
||||
*/ |
|
||||
onShareTimeline() { |
|
||||
// 构建分享参数 |
|
||||
return { |
|
||||
title: "全部分类", |
|
||||
path: "/pages/category/index?" + this.$getShareUrlParams() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
// 页面头部 |
|
||||
.header { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
background-color: #fff; |
|
||||
|
|
||||
// 搜索框 |
|
||||
.search { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
// 切换显示方式 |
|
||||
.show-view { |
|
||||
width: 60rpx; |
|
||||
height: 60rpx; |
|
||||
line-height: 60rpx; |
|
||||
font-size: 36rpx; |
|
||||
color: #505050; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 排序组件 |
|
||||
.store-sort { |
|
||||
position: sticky; |
|
||||
top: var(--window-top); |
|
||||
display: flex; |
|
||||
padding: 20rpx 0; |
|
||||
font-size: 28rpx; |
|
||||
background: #fff; |
|
||||
color: #000; |
|
||||
z-index: 99; |
|
||||
|
|
||||
.sort-item { |
|
||||
flex-basis: 33.3333%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
height: 50rpx; |
|
||||
|
|
||||
&.active { |
|
||||
color: #e49a3d; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.sort-item-price .price-arrow { |
|
||||
margin-left: 20rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #000; |
|
||||
|
|
||||
.icon { |
|
||||
&.active { |
|
||||
color: #e49a3d; |
|
||||
} |
|
||||
|
|
||||
&.up { |
|
||||
margin-bottom: -16rpx; |
|
||||
} |
|
||||
|
|
||||
&.down { |
|
||||
margin-top: -16rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 商品列表 |
|
||||
.goods-list { |
|
||||
padding: 4rpx; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
// 单列显示 |
|
||||
.goods-list.column-1 { |
|
||||
.goods-item { |
|
||||
width: 100%; |
|
||||
height: 280rpx; |
|
||||
margin-bottom: 12rpx; |
|
||||
padding: 20rpx; |
|
||||
box-sizing: border-box; |
|
||||
background: #fff; |
|
||||
line-height: 1.6; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-item_left { |
|
||||
display: flex; |
|
||||
width: 300rpx; |
|
||||
background: #fff; |
|
||||
align-items: center; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 240rpx; |
|
||||
height: 240rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-item_right { |
|
||||
position: relative; |
|
||||
// width: 450rpx; |
|
||||
flex: 1; |
|
||||
|
|
||||
.goods-name { |
|
||||
margin-top: 10rpx; |
|
||||
min-height: 68rpx; |
|
||||
line-height: 1.3; |
|
||||
white-space: normal; |
|
||||
color: #484848; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-item_desc { |
|
||||
margin-top: 8rpx; |
|
||||
} |
|
||||
|
|
||||
.desc-selling_point { |
|
||||
width: 400rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #e49a3d; |
|
||||
} |
|
||||
|
|
||||
.desc-goods_sales { |
|
||||
color: #999; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.desc_footer { |
|
||||
font-size: 24rpx; |
|
||||
|
|
||||
.price_x { |
|
||||
margin-right: 16rpx; |
|
||||
color: #f03c3c; |
|
||||
font-size: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.price_y { |
|
||||
text-decoration: line-through; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 平铺显示 |
|
||||
.goods-list.column-2 { |
|
||||
.goods-item { |
|
||||
width: 50%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-item { |
|
||||
float: left; |
|
||||
box-sizing: border-box; |
|
||||
padding: 6rpx; |
|
||||
|
|
||||
.goods-image { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 0; |
|
||||
padding-bottom: 100%; |
|
||||
overflow: hidden; |
|
||||
background: #fff; |
|
||||
|
|
||||
&:after { |
|
||||
content: ''; |
|
||||
display: block; |
|
||||
margin-top: 100%; |
|
||||
} |
|
||||
|
|
||||
.image { |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
-o-object-fit: cover; |
|
||||
object-fit: cover; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.detail { |
|
||||
padding: 8rpx; |
|
||||
background: #fff; |
|
||||
|
|
||||
.goods-name { |
|
||||
min-height: 68rpx; |
|
||||
line-height: 32rpx; |
|
||||
white-space: normal; |
|
||||
color: #484848; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
|
|
||||
.detail-price { |
|
||||
.goods-price { |
|
||||
margin-right: 8rpx; |
|
||||
} |
|
||||
|
|
||||
.line-price { |
|
||||
text-decoration: line-through; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,306 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" |
|
||||
@up="upCallback"> |
|
||||
|
|
||||
<!-- tab栏 --> |
|
||||
<u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" |
|
||||
@change="onChangeTab" /> |
|
||||
|
|
||||
<!-- 优惠券列表 --> |
|
||||
<view class="coupon-list"> |
|
||||
<view class="coupon-item" v-for="(item, index) in list.data" :key="index"> |
|
||||
<view class="item-wrapper" :class="['color-' + (item.state.value ? color[index % color.length] : 'gray')]"> |
|
||||
<view class="coupon-type">{{ CouponTypeEnum[item.coupon_type].name }}</view> |
|
||||
<view class="tip dis-flex flex-dir-column flex-x-center"> |
|
||||
<view v-if="item.coupon_type == CouponTypeEnum.FULL_DISCOUNT.value"> |
|
||||
<text class="f-30">￥</text> |
|
||||
<text class="money">{{ item.reduce_price }}</text> |
|
||||
</view> |
|
||||
<text class="money" v-if="item.coupon_type == CouponTypeEnum.DISCOUNT.value">{{ item.discount }}折</text> |
|
||||
<text class="pay-line">满{{ item.min_price }}元可用</text> |
|
||||
</view> |
|
||||
<view class="split-line"></view> |
|
||||
<view class="content dis-flex flex-dir-column flex-x-between"> |
|
||||
<view class="title">{{ item.name }}</view> |
|
||||
<view class="bottom dis-flex flex-y-center"> |
|
||||
<view class="time flex-box"> |
|
||||
<block v-if="item.start_time === item.end_time">{{ item.start_time }} 当天有效</block> |
|
||||
<block v-else>{{ item.start_time }}~{{ item.end_time }}</block> |
|
||||
</view> |
|
||||
<view class="receive state"> |
|
||||
<text>{{ item.state.text }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
import * as MyCouponApi from '@/api/myCoupon' |
|
||||
import { CouponTypeEnum } from '@/common/enum/coupon' |
|
||||
|
|
||||
const color = ['red', 'blue', 'violet', 'yellow'] |
|
||||
const pageSize = 15 |
|
||||
const tabs = [{ |
|
||||
name: `未使用`, |
|
||||
value: 'isUnused' |
|
||||
}, { |
|
||||
name: `已使用`, |
|
||||
value: 'isUse' |
|
||||
}, { |
|
||||
name: `已过期`, |
|
||||
value: 'isExpire' |
|
||||
}] |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
CouponTypeEnum, |
|
||||
// 颜色组 |
|
||||
color, |
|
||||
// 标签栏数据 |
|
||||
tabs, |
|
||||
// 当前标签索引 |
|
||||
curTab: 0, |
|
||||
// 优惠券列表数据 |
|
||||
list: getEmptyPaginateObj(), |
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于4条才显示无更多数据 |
|
||||
noMoreSize: 4, |
|
||||
// 空布局 |
|
||||
empty: { |
|
||||
tip: '亲，暂无相关优惠券' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getCouponList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 获取优惠券列表 |
|
||||
*/ |
|
||||
getCouponList(pageNo = 1) { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
MyCouponApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false }) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = result.data.list |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 评分类型 |
|
||||
getTabValue() { |
|
||||
return this.tabs[this.curTab].value |
|
||||
}, |
|
||||
|
|
||||
// 切换标签项 |
|
||||
onChangeTab(index) { |
|
||||
const app = this |
|
||||
// 设置当前选中的标签 |
|
||||
app.curTab = index |
|
||||
// 刷新优惠券列表 |
|
||||
app.onRefreshList() |
|
||||
}, |
|
||||
|
|
||||
// 刷新优惠券列表 |
|
||||
onRefreshList() { |
|
||||
this.list = getEmptyPaginateObj() |
|
||||
setTimeout(() => { |
|
||||
this.mescroll.resetUpScroll() |
|
||||
}, 120) |
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.coupon-list { |
|
||||
padding: 20rpx; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.coupon-item { |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
margin-bottom: 22rpx; |
|
||||
} |
|
||||
|
|
||||
.item-wrapper { |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
background: #fff; |
|
||||
border-radius: 8rpx; |
|
||||
color: #fff; |
|
||||
height: 180rpx; |
|
||||
|
|
||||
.coupon-type { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
z-index: 10; |
|
||||
width: 128rpx; |
|
||||
padding: 6rpx 0; |
|
||||
background: #a771ff; |
|
||||
font-size: 20rpx; |
|
||||
text-align: center; |
|
||||
color: #ffffff; |
|
||||
transform: rotate(45deg); |
|
||||
transform-origin: 64rpx 64rpx; |
|
||||
} |
|
||||
|
|
||||
&.color-blue { |
|
||||
background: linear-gradient(-125deg, #57bdbf, #2f9de2); |
|
||||
} |
|
||||
|
|
||||
&.color-red { |
|
||||
background: linear-gradient(-128deg, #ff6d6d, #ff3636); |
|
||||
} |
|
||||
|
|
||||
&.color-violet { |
|
||||
background: linear-gradient(-113deg, #ef86ff, #b66ff5); |
|
||||
|
|
||||
.coupon-type { |
|
||||
background: #55b5ff; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.color-yellow { |
|
||||
background: linear-gradient(-141deg, #f7d059, #fdb054); |
|
||||
} |
|
||||
|
|
||||
&.color-gray { |
|
||||
background: linear-gradient(-113deg, #bdbdbd, #a2a1a2); |
|
||||
|
|
||||
.coupon-type { |
|
||||
background: #9e9e9e; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
flex: 1; |
|
||||
padding: 30rpx 20rpx; |
|
||||
border-radius: 16rpx 0 0 16rpx; |
|
||||
|
|
||||
.title { |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
|
|
||||
.bottom { |
|
||||
.time { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.receive { |
|
||||
height: 46rpx; |
|
||||
width: 122rpx; |
|
||||
line-height: 46rpx; |
|
||||
text-align: center; |
|
||||
border: 1rpx solid #fff; |
|
||||
border-radius: 30rpx; |
|
||||
color: #fff; |
|
||||
font-size: 24rpx; |
|
||||
|
|
||||
&.state { |
|
||||
border: none; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.tip { |
|
||||
position: relative; |
|
||||
flex: 0 0 32%; |
|
||||
text-align: center; |
|
||||
border-radius: 0 16rpx 16rpx 0; |
|
||||
|
|
||||
.money { |
|
||||
font-weight: bold; |
|
||||
font-size: 52rpx; |
|
||||
} |
|
||||
|
|
||||
.pay-line { |
|
||||
font-size: 22rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.split-line { |
|
||||
position: relative; |
|
||||
flex: 0 0 0; |
|
||||
border-left: 4rpx solid #fff; |
|
||||
margin: 0 10rpx 0 6rpx; |
|
||||
background: #fff; |
|
||||
|
|
||||
&:before, |
|
||||
{ |
|
||||
border-radius: 0 0 16rpx 16rpx; |
|
||||
top: 0; |
|
||||
} |
|
||||
|
|
||||
&:after { |
|
||||
border-radius: 16rpx 16rpx 0 0; |
|
||||
bottom: 0; |
|
||||
} |
|
||||
|
|
||||
&:before, |
|
||||
&:after { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
width: 24rpx; |
|
||||
height: 12rpx; |
|
||||
background: #f7f7f7; |
|
||||
left: -14rpx; |
|
||||
z-index: 1; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,136 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<!-- 订单页列表 --> |
|
||||
<view class="order-list"> |
|
||||
<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="$navTo(item.path)"> |
|
||||
<view class="order-item-icon" :style="{ color: item.color }"> |
|
||||
<text class="iconfont" :class="item.icon"></text> |
|
||||
</view> |
|
||||
<view class="order-item-name">{{ item.name }}</view> |
|
||||
<view class="icon-arrow"> |
|
||||
<text class="iconfont icon-arrow-right"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 操作按钮 --> |
|
||||
<view class="footer"> |
|
||||
<view class="btn-wrapper"> |
|
||||
<view class="btn-item btn-item-main" @click="$navTo('pages/index/index')"> |
|
||||
<view class="btn-item-icon"> |
|
||||
<text class="iconfont icon-shouye2"></text> |
|
||||
</view> |
|
||||
<view class="btn-item-name"> |
|
||||
<text>返回首页</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as UserApi from '@/api/user' |
|
||||
|
|
||||
// 订单页数据 |
|
||||
const orderList = [{ |
|
||||
name: '商城订单', |
|
||||
icon: 'icon-qpdingdan', |
|
||||
color: 'rgb(253 65 0)', |
|
||||
path: 'pages/order/index' |
|
||||
}, |
|
||||
{ |
|
||||
name: '充值订单', |
|
||||
icon: 'icon-jifen', |
|
||||
color: 'rgb(191, 150, 7)', |
|
||||
path: 'pages/wallet/recharge/order' |
|
||||
} |
|
||||
] |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
orderList |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 获取当前用户信息 |
|
||||
this.getUserInfo() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取当前用户信息（验证是否登录） |
|
||||
getUserInfo() { |
|
||||
const app = this |
|
||||
UserApi.info() |
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.order-list { |
|
||||
padding: 0 25rpx; |
|
||||
background-color: #fff; |
|
||||
|
|
||||
.order-item { |
|
||||
position: relative; |
|
||||
padding: 26rpx 16rpx; |
|
||||
border-bottom: 1rpx solid #eee; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
font-size: 30rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.order-item-icon { |
|
||||
font-size: 34rpx; |
|
||||
margin-right: 18rpx; |
|
||||
} |
|
||||
|
|
||||
.icon-arrow { |
|
||||
position: absolute; |
|
||||
top: 26rpx; |
|
||||
right: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 底部操作栏 |
|
||||
.footer { |
|
||||
position: fixed; |
|
||||
bottom: var(--window-bottom); |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
z-index: 11; |
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24); |
|
||||
background: #fff; |
|
||||
|
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: constant(safe-area-inset-bottom); |
|
||||
padding-bottom: env(safe-area-inset-bottom); |
|
||||
|
|
||||
.btn-item { |
|
||||
font-size: 30rpx; |
|
||||
height: 90rpx; |
|
||||
border-radius: 50rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.btn-item-icon { |
|
||||
font-size: 34rpx; |
|
||||
margin-right: 18rpx; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,571 +0,0 @@ |
|||||
<template> |
|
||||
<view v-if="!isLoading" class="container"> |
|
||||
<view class="goods-list"> |
|
||||
<view class="goods-item" v-for="(item, index) in goodsList" :key="index"> |
|
||||
<!-- 商品详情 --> |
|
||||
<view class="goods-main"> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="goods-image"> |
|
||||
<image class="image" :src="item.goods_image" mode="scaleToFill"></image> |
|
||||
</view> |
|
||||
<!-- 商品信息 --> |
|
||||
<view class="goods-content"> |
|
||||
<view class="goods-title"><text class="twoline-hide">{{ item.goods_name }}</text></view> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in item.goods_props" :key="idx"> |
|
||||
<text>{{ props.value.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 交易信息 --> |
|
||||
<view class="goods-trade"> |
|
||||
<view class="goods-price"> |
|
||||
<text class="unit">￥</text> |
|
||||
<text class="value">{{ item.goods_price }}</text> |
|
||||
</view> |
|
||||
<view class="goods-num"> |
|
||||
<text>×{{ item.total_num }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 选择评价 --> |
|
||||
<view class="score-row"> |
|
||||
<view class="score-item score-praise" :class="{ active: formData[index].score == 10 }" |
|
||||
@click="setScore(index, 10)"> |
|
||||
<view class="score"> |
|
||||
<text class="score-icon iconfont icon-haoping"></text> |
|
||||
<text class="score-text">好评</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="score-item score-review" :class="{ active: formData[index].score == 20 }" |
|
||||
@click="setScore(index, 20)"> |
|
||||
<view class="score"> |
|
||||
<text class="score-icon iconfont icon-zhongping"></text> |
|
||||
<text class="score-text">中评</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="score-item score-negative" :class="{ active: formData[index].score == 30 }" |
|
||||
@click="setScore(index, 30)"> |
|
||||
<view class="score"> |
|
||||
<text class="score-icon iconfont icon-chaping"></text> |
|
||||
<text class="score-text">差评</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 评价内容 --> |
|
||||
<view class="form-content"> |
|
||||
<textarea class="textarea" v-model="formData[index].content" maxlength="500" |
|
||||
placeholder="请输入评价内容 (留空则不评价)"></textarea> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 图片列表 --> |
|
||||
<view class="image-list"> |
|
||||
<view class="image-preview" v-for="(image, imageIndex) in formData[index].imageList" :key="imageIndex"> |
|
||||
<text class="image-delete iconfont icon-shanchu" @click="deleteImage(index, imageIndex)"></text> |
|
||||
<image class="image" mode="aspectFill" :src="image.path"></image> |
|
||||
</view> |
|
||||
<view v-if="!formData[index].imageList || formData[index].imageList.length < maxImageLength" |
|
||||
class="image-picker" @click="chooseImage(index)"> |
|
||||
<text class="choose-icon iconfont icon-camera"></text> |
|
||||
<text class="choose-text">上传图片</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 底部操作按钮 --> |
|
||||
<view class="footer-fixed"> |
|
||||
<view class="btn-wrapper"> |
|
||||
<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">确认提交</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as UploadApi from '@/api/upload' |
|
||||
import * as OrderCommentApi from '@/api/order/comment' |
|
||||
|
|
||||
const maxImageLength = 6 |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 当前订单ID |
|
||||
orderId: null, |
|
||||
// 待评价商品列表 |
|
||||
goodsList: [], |
|
||||
// 表单数据 |
|
||||
formData: [], |
|
||||
// 最大图片数量 |
|
||||
maxImageLength, |
|
||||
// 按钮禁用 |
|
||||
disabled: false |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad({ orderId }) { |
|
||||
this.orderId = orderId |
|
||||
// 获取待评价商品列表 |
|
||||
this.getGoodsList() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取待评价商品列表 |
|
||||
getGoodsList() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
OrderCommentApi.list(app.orderId) |
|
||||
.then(result => { |
|
||||
app.goodsList = result.data.goodsList |
|
||||
app.initFormData() |
|
||||
app.isLoading = false |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 初始化form数据 |
|
||||
initFormData() { |
|
||||
const { goodsList } = this |
|
||||
const formData = goodsList.map(item => { |
|
||||
return { |
|
||||
goods_id: item.goods_id, |
|
||||
order_goods_id: item.order_goods_id, |
|
||||
score: 10, |
|
||||
content: '', |
|
||||
imageList: [], |
|
||||
uploaded: [] |
|
||||
} |
|
||||
}) |
|
||||
this.formData = formData |
|
||||
}, |
|
||||
|
|
||||
// 设置评分 |
|
||||
setScore(index, score) { |
|
||||
this.formData[index].score = score |
|
||||
}, |
|
||||
|
|
||||
// 选择图片 |
|
||||
chooseImage(index) { |
|
||||
const app = this |
|
||||
const oldImageList = app.formData[index].imageList |
|
||||
// 选择图片 |
|
||||
uni.chooseImage({ |
|
||||
count: maxImageLength - oldImageList.length, |
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
|
||||
success({ tempFiles }) { |
|
||||
// tempFiles = [{path:'xxx', size:100}] |
|
||||
app.formData[index].imageList = oldImageList.concat(tempFiles) |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 删除图片 |
|
||||
deleteImage(index, imageIndex) { |
|
||||
this.formData[index].imageList.splice(imageIndex, 1) |
|
||||
}, |
|
||||
|
|
||||
// 表单提交 |
|
||||
handleSubmit() { |
|
||||
const app = this |
|
||||
// 判断是否重复提交 |
|
||||
if (app.disabled === true) return false |
|
||||
// 按钮禁用 |
|
||||
app.disabled = true |
|
||||
// 判断是否需要上传图片 |
|
||||
const imagesLength = app.getImagesLength() |
|
||||
if (imagesLength > 0) { |
|
||||
app.uploadFile() |
|
||||
.then(() => { |
|
||||
console.log('then') |
|
||||
app.onSubmit() |
|
||||
}) |
|
||||
.catch(err => { |
|
||||
console.log('catch') |
|
||||
app.disabled = false |
|
||||
if (err.statusCode !== 0) { |
|
||||
app.$toast(err.errMsg) |
|
||||
} |
|
||||
console.log('err', err) |
|
||||
}) |
|
||||
} else { |
|
||||
app.onSubmit() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 统计图片数量 |
|
||||
getImagesLength() { |
|
||||
const { formData } = this |
|
||||
let imagesLength = 0 |
|
||||
formData.forEach(item => { |
|
||||
if (item.content.trim()) { |
|
||||
imagesLength += item.imageList.length |
|
||||
} |
|
||||
}) |
|
||||
return imagesLength |
|
||||
}, |
|
||||
|
|
||||
// 提交到后端 |
|
||||
onSubmit() { |
|
||||
const app = this |
|
||||
OrderCommentApi.submit(app.orderId, app.formData) |
|
||||
.then(result => { |
|
||||
app.$toast(result.message) |
|
||||
setTimeout(() => { |
|
||||
app.disabled = false |
|
||||
uni.navigateBack() |
|
||||
}, 1500) |
|
||||
}) |
|
||||
.catch(err => app.disabled = false) |
|
||||
}, |
|
||||
|
|
||||
// 上传图片 |
|
||||
uploadFile() { |
|
||||
const app = this |
|
||||
const { formData } = app |
|
||||
// 整理上传文件路径 |
|
||||
const files = [] |
|
||||
formData.forEach((item, index) => { |
|
||||
if (item.content.trim() && item.imageList.length) { |
|
||||
const images = item.imageList.map(image => image) |
|
||||
files.push({ formDataIndex: index, images }) |
|
||||
} |
|
||||
}) |
|
||||
// 批量上传 |
|
||||
return new Promise((resolve, reject) => { |
|
||||
Promise.all(files.map((file, index) => { |
|
||||
return new Promise((resolve, reject) => { |
|
||||
UploadApi.image(file.images) |
|
||||
.then(fileIds => { |
|
||||
app.formData[index].uploaded = fileIds |
|
||||
resolve(fileIds) |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
})) |
|
||||
.then(resolve, reject) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.container { |
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: constant(env(safe-area-inset-bottom) + 140rpx); |
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); |
|
||||
} |
|
||||
|
|
||||
.goods-list { |
|
||||
font-size: 28rpx; |
|
||||
padding-top: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-item { |
|
||||
width: 94%; |
|
||||
background: #fff; |
|
||||
padding: 24rpx 24rpx; |
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
|
||||
margin: 0 auto 30rpx auto; |
|
||||
border-radius: 20rpx; |
|
||||
|
|
||||
.goods-detail { |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
|
||||
.left { |
|
||||
.goods-image { |
|
||||
display: block; |
|
||||
width: 150rpx; |
|
||||
height: 150rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.right { |
|
||||
padding-left: 20rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.score-row { |
|
||||
display: flex; |
|
||||
justify-content: space-around; |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
|
||||
.score-item { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
|
|
||||
&.score-praise { |
|
||||
color: #ff4544; |
|
||||
|
|
||||
.score-icon { |
|
||||
background: #ff4544; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.score-review { |
|
||||
color: #fcb500; |
|
||||
|
|
||||
.score-icon { |
|
||||
background: #fcb500; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.score-negative { |
|
||||
color: #9b9b9b; |
|
||||
|
|
||||
.score-icon { |
|
||||
background: #9b9b9b; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.score { |
|
||||
padding: 10rpx 20rpx 10rpx 10rpx; |
|
||||
border-radius: 30rpx; |
|
||||
|
|
||||
.score-icon { |
|
||||
margin-right: 10rpx; |
|
||||
padding: 10rpx; |
|
||||
border-radius: 50%; |
|
||||
font-size: 30rpx; |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.active { |
|
||||
.score { |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
&.score-praise { |
|
||||
.score { |
|
||||
background: #ff4544; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.score-review { |
|
||||
.score { |
|
||||
background: #fcb500; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&.score-negative { |
|
||||
.score { |
|
||||
background: #9b9b9b; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 评价内容 |
|
||||
.form-content { |
|
||||
padding: 14rpx 10rpx; |
|
||||
|
|
||||
.textarea { |
|
||||
width: 100%; |
|
||||
height: 220rpx; |
|
||||
padding: 12rpx; |
|
||||
border: 1rpx solid #e8e8e8; |
|
||||
border-radius: 5rpx; |
|
||||
box-sizing: border-box; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.image-list { |
|
||||
padding: 0 20rpx; |
|
||||
margin-top: 20rpx; |
|
||||
margin-bottom: -20rpx; |
|
||||
|
|
||||
&:after { |
|
||||
clear: both; |
|
||||
content: " "; |
|
||||
display: table; |
|
||||
} |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.image-picker, |
|
||||
.image-preview { |
|
||||
width: 184rpx; |
|
||||
height: 184rpx; |
|
||||
margin-right: 30rpx; |
|
||||
margin-bottom: 30rpx; |
|
||||
float: left; |
|
||||
|
|
||||
&:nth-child(3n+0) { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.image-picker { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
border: 1rpx dashed #ccc; |
|
||||
color: #ccc; |
|
||||
|
|
||||
.choose-icon { |
|
||||
font-size: 48rpx; |
|
||||
margin-bottom: 6rpx; |
|
||||
} |
|
||||
|
|
||||
.choose-text { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.image-preview { |
|
||||
position: relative; |
|
||||
|
|
||||
.image-delete { |
|
||||
position: absolute; |
|
||||
top: -15rpx; |
|
||||
right: -15rpx; |
|
||||
height: 42rpx; |
|
||||
width: 42rpx; |
|
||||
line-height: 42rpx; |
|
||||
background: rgba(0, 0, 0, 0.64); |
|
||||
border-radius: 50%; |
|
||||
color: #fff; |
|
||||
font-weight: bolder; |
|
||||
font-size: 22rpx; |
|
||||
z-index: 10; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
// 商品项 |
|
||||
.goods-main { |
|
||||
display: flex; |
|
||||
margin-bottom: 20rpx; |
|
||||
|
|
||||
// 商品图片 |
|
||||
.goods-image { |
|
||||
width: 180rpx; |
|
||||
height: 180rpx; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品内容 |
|
||||
.goods-content { |
|
||||
flex: 1; |
|
||||
padding-left: 16rpx; |
|
||||
padding-top: 16rpx; |
|
||||
|
|
||||
.goods-title { |
|
||||
font-size: 26rpx; |
|
||||
max-height: 76rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-props { |
|
||||
margin-top: 14rpx; |
|
||||
height: 40rpx; |
|
||||
color: #ababab; |
|
||||
font-size: 24rpx; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
display: inline-block; |
|
||||
margin-right: 14rpx; |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background-color: #F5F5F5; |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 交易信息 |
|
||||
.goods-trade { |
|
||||
padding-top: 16rpx; |
|
||||
width: 150rpx; |
|
||||
text-align: right; |
|
||||
color: $uni-text-color-grey; |
|
||||
font-size: 26rpx; |
|
||||
|
|
||||
.goods-price { |
|
||||
vertical-align: bottom; |
|
||||
margin-bottom: 16rpx; |
|
||||
|
|
||||
.unit { |
|
||||
margin-right: -2rpx; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
|
|
||||
// 底部操作栏 |
|
||||
.footer-fixed { |
|
||||
position: fixed; |
|
||||
bottom: var(--window-bottom); |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
height: 96rpx; |
|
||||
z-index: 11; |
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24); |
|
||||
background: #fff; |
|
||||
|
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: constant(safe-area-inset-bottom); |
|
||||
padding-bottom: env(safe-area-inset-bottom); |
|
||||
|
|
||||
.btn-wrapper { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 0 20rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-item { |
|
||||
flex: 1; |
|
||||
font-size: 28rpx; |
|
||||
height: 80rpx; |
|
||||
line-height: 80rpx; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
border-radius: 50rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-item-main { |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
|
|
||||
// 禁用按钮 |
|
||||
&.disabled { |
|
||||
background: #ff9779; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,866 +0,0 @@ |
|||||
<template> |
|
||||
<view v-if="!isLoading" class="container"> |
|
||||
|
|
||||
<view class="header"> |
|
||||
<!-- 订单状态 --> |
|
||||
<view class="order-status"> |
|
||||
<view class="status-icon"> |
|
||||
<!-- 进行中的订单 --> |
|
||||
<block v-if="order.order_status == OrderStatusEnum.NORMAL.value"> |
|
||||
<!-- 待支付 --> |
|
||||
<block v-if="order.pay_status == PayStatusEnum.PENDING.value"> |
|
||||
<image class="image" src="/static/order/status/wait_pay.png" mode="aspectFit"></image> |
|
||||
</block> |
|
||||
<!-- 待发货 --> |
|
||||
<block v-else-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
|
||||
<image class="image" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image> |
|
||||
</block> |
|
||||
<!-- 待收货 --> |
|
||||
<block v-else-if="order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"> |
|
||||
<image class="image" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image> |
|
||||
</block> |
|
||||
</block> |
|
||||
<!-- 已完成 --> |
|
||||
<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value"> |
|
||||
<image class="image" src="/static/order/status/received.png" mode="aspectFit"></image> |
|
||||
</block> |
|
||||
<!-- 已取消/待取消 --> |
|
||||
<block v-if="order.order_status == OrderStatusEnum.CANCELLED.value || order.order_status == OrderStatusEnum.APPLY_CANCEL.value"> |
|
||||
<image class="image" src="/static/order/status/close.png" mode="aspectFit"></image> |
|
||||
</block> |
|
||||
</view> |
|
||||
<view class="status-text"> |
|
||||
<text>{{ order.state_text }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 下一步操作 --> |
|
||||
<view class="next-action" v-if="order.order_status == OrderStatusEnum.NORMAL.value"> |
|
||||
<view v-if="order.pay_status == PayStatusEnum.PENDING.value" class="action-btn" @click="onPay()">去支付</view> |
|
||||
<view v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value" class="action-btn" @click="onReceipt(order.order_id)">确认收货</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 快递配送：配送地址 --> |
|
||||
<view class="delivery-address i-card"> |
|
||||
<view class="link-man"> |
|
||||
<text class="name">{{ order.address.name }}</text> |
|
||||
<text class="phone">{{ order.address.phone }}</text> |
|
||||
</view> |
|
||||
<view class="address"> |
|
||||
<text class="region" v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text> |
|
||||
<text class="detail">{{ order.address.detail }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 物流信息 --> |
|
||||
<view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.express" class="express i-card" @click="handleTargetExpress()"> |
|
||||
<view class="main"> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">物流公司</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ order.express.express_name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">物流单号</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ order.express_no }}</text> |
|
||||
<view class="act-copy" @click.stop="handleCopy(order.express_no)"> |
|
||||
<text>复制</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="right-arrow"> |
|
||||
<text class="iconfont icon-arrow-right"></text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品列表 --> |
|
||||
<view class="goods-list i-card"> |
|
||||
<view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx"> |
|
||||
<view class="goods-main" @click="handleTargetGoods(goods.goods_id)"> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="goods-image"> |
|
||||
<image class="image" :src="goods.goods_image" mode="scaleToFill"></image> |
|
||||
</view> |
|
||||
<!-- 商品信息 --> |
|
||||
<view class="goods-content"> |
|
||||
<view class="goods-title"><text class="twoline-hide">{{ goods.goods_name }}</text></view> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx"> |
|
||||
<text>{{ props.value.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 交易信息 --> |
|
||||
<view class="goods-trade"> |
|
||||
<view class="goods-price"> |
|
||||
<text class="unit">￥</text> |
|
||||
<text class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text> |
|
||||
</view> |
|
||||
<view class="goods-num"> |
|
||||
<text>×{{ goods.total_num }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 商品售后 --> |
|
||||
<view class="goods-refund"> |
|
||||
<text v-if="goods.refund" class="stata-text">已申请售后</text> |
|
||||
<view v-else-if="order.isAllowRefund" class="action-btn" @click.stop="handleApplyRefund(goods.order_goods_id)">申请售后</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 订单信息 --> |
|
||||
<view class="order-info i-card"> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">订单编号</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ order.order_no }}</text> |
|
||||
<view class="act-copy" @click="handleCopy(order.order_no)"> |
|
||||
<text>复制</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">下单时间</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ order.create_time }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">买家留言</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ order.buyer_remark ? order.buyer_remark : '--' }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 结算信息 --> |
|
||||
<view class="trade-info i-card"> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">订单金额</view> |
|
||||
<view class="item-content"> |
|
||||
<text>￥{{ order.total_price }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-if="order.coupon_money > 0" class="info-item"> |
|
||||
<view class="item-lable">优惠券抵扣</view> |
|
||||
<view class="item-content"> |
|
||||
<text>-￥{{ order.coupon_money }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-if="order.points_money > 0" class="info-item"> |
|
||||
<view class="item-lable">{{ setting.points_name }}抵扣</view> |
|
||||
<view class="item-content"> |
|
||||
<text>-￥{{ order.points_money }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">运费</view> |
|
||||
<view class="item-content"> |
|
||||
<text>+￥{{ order.express_price }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-if="order.update_price.value != '0.00'" class="info-item"> |
|
||||
<view class="item-lable">后台改价</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ order.update_price.symbol }}</text> |
|
||||
<text>￥{{ order.update_price.value }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="divider"></view> |
|
||||
<view class="trade-total"> |
|
||||
<text class="lable">实付款</text> |
|
||||
<view class="goods-price"> |
|
||||
<text class="unit">￥</text> |
|
||||
<text class="value">{{ order.pay_price }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 底部操作按钮 --> |
|
||||
<view v-if="order.order_status != OrderStatusEnum.CANCELLED.value" class="footer-fixed"> |
|
||||
<view class="btn-wrapper"> |
|
||||
<!-- 未支付取消订单 --> |
|
||||
<block v-if="order.pay_status == PayStatusEnum.PENDING.value"> |
|
||||
<view class="btn-item" @click="onCancel(order.order_id)">取消</view> |
|
||||
</block> |
|
||||
<!-- 已支付进行中的订单 --> |
|
||||
<block v-if="order.order_status != OrderStatusEnum.APPLY_CANCEL.value"> |
|
||||
<block v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
|
||||
<view class="btn-item" @click="onCancel(order.order_id)">申请取消</view> |
|
||||
</block> |
|
||||
</block> |
|
||||
<!-- 已申请取消 --> |
|
||||
<view v-else class="f-28 col-8">取消申请中</view> |
|
||||
<!-- 未支付的订单 --> |
|
||||
<block v-if="order.pay_status == PayStatusEnum.PENDING.value"> |
|
||||
<view class="btn-item active" @click="onPay()">去支付</view> |
|
||||
</block> |
|
||||
<!-- 确认收货 --> |
|
||||
<block v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"> |
|
||||
<view class="btn-item active" @click="onReceipt(order.order_id)">确认收货</view> |
|
||||
</block> |
|
||||
<!-- 订单评价 --> |
|
||||
<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value && order.is_comment == 0"> |
|
||||
<view class="btn-item" @click="handleTargetComment(order.order_id)">评价</view> |
|
||||
</block> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 支付方式弹窗 --> |
|
||||
<u-popup v-model="showPayPopup" mode="bottom" border-radius="26" :closeable="true"> |
|
||||
<view class="pay-popup"> |
|
||||
<view class="title">请选择支付方式</view> |
|
||||
<view class="pop-content"> |
|
||||
<!-- 微信支付 --> |
|
||||
<!-- #ifdef MP-WEIXIN --> |
|
||||
<view class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.WECHAT.value)"> |
|
||||
<view class="item-left dis-flex flex-y-center"> |
|
||||
<view class="item-left_icon wechat"> |
|
||||
<text class="iconfont icon-wechat-pay"></text> |
|
||||
</view> |
|
||||
<view class="item-left_text"> |
|
||||
<text>{{ PayTypeEnum.WECHAT.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- #endif --> |
|
||||
<!-- 余额支付 --> |
|
||||
<view class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.BALANCE.value)"> |
|
||||
<view class="item-left dis-flex flex-y-center"> |
|
||||
<view class="item-left_icon balance"> |
|
||||
<text class="iconfont icon-balance-pay"></text> |
|
||||
</view> |
|
||||
<view class="item-left_text"> |
|
||||
<text>{{ PayTypeEnum.BALANCE.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-popup> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { |
|
||||
DeliveryStatusEnum, |
|
||||
DeliveryTypeEnum, |
|
||||
OrderStatusEnum, |
|
||||
PayStatusEnum, |
|
||||
PayTypeEnum, |
|
||||
ReceiptStatusEnum |
|
||||
} from '@/common/enum/order' |
|
||||
import * as OrderApi from '@/api/order' |
|
||||
import { wxPayment } from '@/core/app' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
DeliveryStatusEnum, |
|
||||
DeliveryTypeEnum, |
|
||||
OrderStatusEnum, |
|
||||
PayStatusEnum, |
|
||||
PayTypeEnum, |
|
||||
ReceiptStatusEnum, |
|
||||
// 当前订单ID |
|
||||
orderId: null, |
|
||||
// 加载中 |
|
||||
isLoading: true, |
|
||||
// 当前订单详情 |
|
||||
order: {}, |
|
||||
// 当前设置 |
|
||||
setting: {}, |
|
||||
// 支付方式弹窗 |
|
||||
showPayPopup: false, |
|
||||
// 控制onShow事件是否刷新订单信息 |
|
||||
canReset: false, |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad({ orderId }) { |
|
||||
// 当前订单ID |
|
||||
this.orderId = orderId |
|
||||
// 获取当前订单信息 |
|
||||
this.getOrderDetail() |
|
||||
// 注册全局事件订阅: 是否刷新当前订单数据 |
|
||||
uni.$on('syncRefresh', (val, isCur) => { |
|
||||
if (!isCur) { |
|
||||
this.canReset = val |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow() { |
|
||||
this.canReset && this.getOrderDetail() |
|
||||
this.canReset = false |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取当前订单信息 |
|
||||
getOrderDetail(canReset = false) { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
OrderApi.detail(app.orderId) |
|
||||
.then(result => { |
|
||||
app.order = result.data.order |
|
||||
app.setting = result.data.setting |
|
||||
app.isLoading = false |
|
||||
}) |
|
||||
// 相应全局事件订阅: 刷新上级页面数据 |
|
||||
canReset && uni.$emit('syncRefresh', true, true) |
|
||||
}, |
|
||||
|
|
||||
// 复制指定内容 |
|
||||
handleCopy(value) { |
|
||||
const app = this |
|
||||
uni.setClipboardData({ |
|
||||
data: value, |
|
||||
success() { |
|
||||
app.$toast('复制成功') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 跳转到物流跟踪页面 |
|
||||
handleTargetExpress() { |
|
||||
this.$navTo('pages/order/express/index', { orderId: this.orderId }) |
|
||||
}, |
|
||||
|
|
||||
// 跳转到商品详情页面 |
|
||||
handleTargetGoods(goodsId) { |
|
||||
this.$navTo('pages/goods/detail', { goodsId }) |
|
||||
}, |
|
||||
|
|
||||
// 跳转到申请售后页面 |
|
||||
handleApplyRefund(orderGoodsId) { |
|
||||
this.$navTo('pages/refund/apply', { orderGoodsId }) |
|
||||
}, |
|
||||
|
|
||||
// 取消订单 |
|
||||
onCancel(orderId) { |
|
||||
const app = this |
|
||||
uni.showModal({ |
|
||||
title: '友情提示', |
|
||||
content: '确认要取消该订单吗？', |
|
||||
success(o) { |
|
||||
if (o.confirm) { |
|
||||
OrderApi.cancel(orderId) |
|
||||
.then(result => { |
|
||||
// 显示成功信息 |
|
||||
app.$toast(result.message) |
|
||||
// 刷新当前订单数据 |
|
||||
app.getOrderDetail(true) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 确认收货 |
|
||||
onReceipt(orderId) { |
|
||||
const app = this |
|
||||
uni.showModal({ |
|
||||
title: '友情提示', |
|
||||
content: '确认收到商品了吗？', |
|
||||
success(o) { |
|
||||
if (o.confirm) { |
|
||||
OrderApi.receipt(orderId) |
|
||||
.then(result => { |
|
||||
// 显示成功信息 |
|
||||
app.$success(result.message) |
|
||||
// 刷新当前订单数据 |
|
||||
app.getOrderDetail(true) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 点击去支付 |
|
||||
onPay() { |
|
||||
// 显示支付方式弹窗 |
|
||||
this.showPayPopup = true |
|
||||
}, |
|
||||
|
|
||||
// 选择支付方式 |
|
||||
onSelectPayType(payType) { |
|
||||
const app = this |
|
||||
// 隐藏支付方式弹窗 |
|
||||
this.showPayPopup = false |
|
||||
// 发起支付请求 |
|
||||
OrderApi.pay(app.orderId, payType) |
|
||||
.then(result => app.onSubmitCallback(result)) |
|
||||
.catch(err => err) |
|
||||
}, |
|
||||
|
|
||||
// 订单提交成功后回调 |
|
||||
onSubmitCallback(result) { |
|
||||
const app = this |
|
||||
// 发起微信支付 |
|
||||
if (result.data.pay_type == PayTypeEnum.WECHAT.value) { |
|
||||
wxPayment(result.data.payment) |
|
||||
.then(() => { |
|
||||
app.$success('支付成功') |
|
||||
setTimeout(() => app.getOrderDetail(true), 1500) |
|
||||
}) |
|
||||
.catch(err => app.$error('订单未支付')) |
|
||||
.finally(() => app.disabled = false) |
|
||||
} |
|
||||
// 余额支付 |
|
||||
if (result.data.pay_type == PayTypeEnum.BALANCE.value) { |
|
||||
app.$success('支付成功') |
|
||||
app.disabled = false |
|
||||
// 刷新当前订单数据 |
|
||||
setTimeout(() => app.getOrderDetail(true), 1500) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 跳转到订单评价页 |
|
||||
handleTargetComment(orderId) { |
|
||||
this.$navTo('pages/order/comment/index', { orderId }) |
|
||||
}, |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
page { |
|
||||
background: #f4f4f4; |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss" scoped> |
|
||||
.container { |
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: constant(env(safe-area-inset-bottom) + 106rpx + 6rpx); |
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx); |
|
||||
} |
|
||||
|
|
||||
// 页面顶部 |
|
||||
.header { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
background-color: #e8c269; |
|
||||
height: 280rpx; |
|
||||
padding: 56rpx 30rpx 0 30rpx; |
|
||||
|
|
||||
.order-status { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
height: 128rpx; |
|
||||
|
|
||||
.status-icon { |
|
||||
width: 128rpx; |
|
||||
height: 128rpx; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.status-text { |
|
||||
padding-left: 20rpx; |
|
||||
color: #fff; |
|
||||
font-size: 38rpx; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.next-action { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
height: 128rpx; |
|
||||
|
|
||||
.action-btn { |
|
||||
min-width: 152rpx; |
|
||||
height: 56rpx; |
|
||||
padding: 0 30rpx; |
|
||||
line-height: 56rpx; |
|
||||
background-color: #fff; |
|
||||
text-align: center; |
|
||||
border-radius: 28rpx; |
|
||||
border-color: rgb(102, 102, 102); |
|
||||
cursor: pointer; |
|
||||
user-select: none; |
|
||||
color: #c7a157; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 通栏卡片 |
|
||||
.i-card { |
|
||||
background: #fff; |
|
||||
padding: 24rpx 24rpx; |
|
||||
width: 94%; |
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
|
||||
margin: 0 auto 20rpx auto; |
|
||||
border-radius: 20rpx; |
|
||||
} |
|
||||
|
|
||||
// 收货地址 |
|
||||
.delivery-address { |
|
||||
margin-top: -50rpx; |
|
||||
|
|
||||
.link-man { |
|
||||
line-height: 46rpx; |
|
||||
color: #333; |
|
||||
|
|
||||
.name { |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.address { |
|
||||
margin-top: 12rpx; |
|
||||
color: #999; |
|
||||
font-size: 24rpx; |
|
||||
|
|
||||
.detail { |
|
||||
margin-left: 6rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 物流公司 |
|
||||
.express { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.main { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.info-item { |
|
||||
display: flex; |
|
||||
margin-bottom: 24rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.item-lable { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
margin-right: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.item-content { |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 26rpx; |
|
||||
color: #333; |
|
||||
|
|
||||
.act-copy { |
|
||||
margin-left: 20rpx; |
|
||||
padding: 2rpx 20rpx; |
|
||||
font-size: 22rpx; |
|
||||
color: #666; |
|
||||
border: 1rpx solid #c1c1c1; |
|
||||
border-radius: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
// 右侧箭头 |
|
||||
.right-arrow { |
|
||||
margin-left: 16rpx; |
|
||||
// color: #777; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 商品列表 |
|
||||
.goods-list { |
|
||||
|
|
||||
// 商品项 |
|
||||
.goods-item { |
|
||||
margin-bottom: 40rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
// 商品信息 |
|
||||
.goods-main { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
// 商品图片 |
|
||||
.goods-image { |
|
||||
width: 180rpx; |
|
||||
height: 180rpx; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品内容 |
|
||||
.goods-content { |
|
||||
flex: 1; |
|
||||
padding-left: 16rpx; |
|
||||
padding-top: 16rpx; |
|
||||
|
|
||||
.goods-title { |
|
||||
font-size: 26rpx; |
|
||||
max-height: 76rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-props { |
|
||||
margin-top: 14rpx; |
|
||||
height: 40rpx; |
|
||||
color: #ababab; |
|
||||
font-size: 24rpx; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
display: inline-block; |
|
||||
margin-right: 14rpx; |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background-color: #F5F5F5; |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 交易信息 |
|
||||
.goods-trade { |
|
||||
padding-top: 16rpx; |
|
||||
width: 150rpx; |
|
||||
text-align: right; |
|
||||
color: $uni-text-color-grey; |
|
||||
font-size: 26rpx; |
|
||||
|
|
||||
.goods-price { |
|
||||
vertical-align: bottom; |
|
||||
margin-bottom: 16rpx; |
|
||||
|
|
||||
.unit { |
|
||||
margin-right: -2rpx; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品售后 |
|
||||
.goods-refund { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
|
|
||||
.stata-text { |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
} |
|
||||
|
|
||||
.action-btn { |
|
||||
border-radius: 28rpx; |
|
||||
padding: 8rpx 26rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #383838; |
|
||||
border: 1rpx solid #a8a8a8; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 订单信息 |
|
||||
.order-info { |
|
||||
|
|
||||
.info-item { |
|
||||
display: flex; |
|
||||
margin-bottom: 24rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.item-lable { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
margin-right: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.item-content { |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 26rpx; |
|
||||
color: #333; |
|
||||
|
|
||||
.act-copy { |
|
||||
margin-left: 20rpx; |
|
||||
padding: 2rpx 20rpx; |
|
||||
font-size: 22rpx; |
|
||||
color: #666; |
|
||||
border: 1rpx solid #c1c1c1; |
|
||||
border-radius: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 交易信息 |
|
||||
.trade-info { |
|
||||
|
|
||||
.info-item { |
|
||||
display: flex; |
|
||||
margin-bottom: 24rpx; |
|
||||
|
|
||||
.item-lable { |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
margin-right: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.item-content { |
|
||||
flex: 1; |
|
||||
font-size: 26rpx; |
|
||||
color: #333; |
|
||||
text-align: right; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.divider { |
|
||||
height: 1rpx; |
|
||||
background: #f1f1f1; |
|
||||
margin-bottom: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.trade-total { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
|
|
||||
.goods-price { |
|
||||
margin-left: 12rpx; |
|
||||
vertical-align: bottom; |
|
||||
color: $uni-text-color-active; |
|
||||
|
|
||||
.unit { |
|
||||
margin-right: -2rpx; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* 底部操作栏 */ |
|
||||
|
|
||||
.footer-fixed { |
|
||||
position: fixed; |
|
||||
bottom: var(--window-bottom); |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
z-index: 11; |
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24); |
|
||||
background: #fff; |
|
||||
|
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: constant(safe-area-inset-bottom); |
|
||||
padding-bottom: env(safe-area-inset-bottom); |
|
||||
|
|
||||
.btn-wrapper { |
|
||||
height: 106rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: flex-end; |
|
||||
padding: 0 30rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-item { |
|
||||
min-width: 164rpx; |
|
||||
border-radius: 28rpx; |
|
||||
padding: 10rpx 24rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #383838; |
|
||||
text-align: center; |
|
||||
border: 1rpx solid #a8a8a8; |
|
||||
margin-left: 24rpx; |
|
||||
|
|
||||
&.active { |
|
||||
color: #fff; |
|
||||
border: none; |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 弹出层-支付方式 |
|
||||
.pay-popup { |
|
||||
padding: 24rpx; |
|
||||
|
|
||||
.title { |
|
||||
font-size: 30rpx; |
|
||||
margin-bottom: 50rpx; |
|
||||
font-weight: bold; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.pop-content { |
|
||||
min-height: 260rpx; |
|
||||
padding: 0 10rpx; |
|
||||
|
|
||||
.pay-item { |
|
||||
padding: 20rpx 35rpx; |
|
||||
font-size: 28rpx; |
|
||||
border-bottom: 1rpx solid #f1f1f1; |
|
||||
|
|
||||
&:last-child { |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
|
|
||||
.item-left_icon { |
|
||||
margin-right: 20rpx; |
|
||||
font-size: 32rpx; |
|
||||
|
|
||||
&.wechat { |
|
||||
color: #00c800; |
|
||||
} |
|
||||
|
|
||||
&.balance { |
|
||||
color: #ff9700; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// |
|
||||
</style> |
|
||||
@ -1,202 +0,0 @@ |
|||||
<template> |
|
||||
<view v-if="!isLoading" class="container"> |
|
||||
<!-- 物流信息 --> |
|
||||
<view class="express i-card"> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">物流公司</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ express.express_name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="info-item"> |
|
||||
<view class="item-lable">物流单号</view> |
|
||||
<view class="item-content"> |
|
||||
<text>{{ express.express_no }}</text> |
|
||||
<view class="act-copy" @click.stop="handleCopy(express.express_no)"> |
|
||||
<text>复制</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 物流动态 --> |
|
||||
<view class="logis-detail"> |
|
||||
<view class="logis-item" :class="{ first: index === 0 }" v-for="(item, index) in express.list" :key="index"> |
|
||||
<view class="logis-item-content"> |
|
||||
<view class="logis-item-content__describe"> |
|
||||
<text class="f-26">{{ item.context }}</text> |
|
||||
</view> |
|
||||
<view class="logis-item-content__time"> |
|
||||
<text class="f-22">{{ item.ftime }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as OrderApi from '@/api/order' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 当前订单ID |
|
||||
orderId: null, |
|
||||
// 物流信息 |
|
||||
express: {} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad({ orderId }) { |
|
||||
this.orderId = orderId |
|
||||
// 获取当前订单的物流信息 |
|
||||
this.getExpress() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取当前订单的物流信息 |
|
||||
getExpress() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
OrderApi.express(app.orderId) |
|
||||
.then(result => { |
|
||||
app.express = result.data.express |
|
||||
app.isLoading = false |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 复制指定内容 |
|
||||
handleCopy(value) { |
|
||||
const app = this |
|
||||
uni.setClipboardData({ |
|
||||
data: value, |
|
||||
success() { |
|
||||
app.$toast('复制成功') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
// 通栏卡片 |
|
||||
.i-card { |
|
||||
background: #fff; |
|
||||
padding: 24rpx 24rpx; |
|
||||
// width: 94%; |
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
|
||||
// margin: 0 auto 20rpx auto; |
|
||||
// border-radius: 20rpx; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
// 物流公司 |
|
||||
.express { |
|
||||
|
|
||||
// margin-top: 24rpx; |
|
||||
|
|
||||
.info-item { |
|
||||
display: flex; |
|
||||
margin-bottom: 24rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.item-lable { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
margin-right: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.item-content { |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
font-size: 26rpx; |
|
||||
color: #333; |
|
||||
|
|
||||
.act-copy { |
|
||||
margin-left: 20rpx; |
|
||||
padding: 2rpx 20rpx; |
|
||||
font-size: 22rpx; |
|
||||
color: #666; |
|
||||
border: 1rpx solid #c1c1c1; |
|
||||
border-radius: 16rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
|
|
||||
.logis-detail { |
|
||||
padding: 30rpx; |
|
||||
background-color: #fff; |
|
||||
|
|
||||
.logis-item { |
|
||||
position: relative; |
|
||||
padding: 10px 0 10px 25px; |
|
||||
box-sizing: border-box; |
|
||||
border-left: 2px solid #ccc; |
|
||||
|
|
||||
&.first { |
|
||||
border-left: 2px solid #f40; |
|
||||
|
|
||||
&:after { |
|
||||
background: #f40; |
|
||||
} |
|
||||
|
|
||||
.logis-item-content { |
|
||||
background: #ff6e39; |
|
||||
color: #fff; |
|
||||
|
|
||||
&:after { |
|
||||
border-bottom-color: #ff6e39; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&:after { |
|
||||
content: ' '; |
|
||||
display: inline-block; |
|
||||
position: absolute; |
|
||||
left: -6px; |
|
||||
top: 30px; |
|
||||
width: 6px; |
|
||||
height: 6px; |
|
||||
border-radius: 10px; |
|
||||
background: #bdbdbd; |
|
||||
border: 2px solid #fff; |
|
||||
} |
|
||||
|
|
||||
.logis-item-content { |
|
||||
position: relative; |
|
||||
background: #f9f9f9; |
|
||||
padding: 10rpx 20rpx; |
|
||||
box-sizing: border-box; |
|
||||
color: #666; |
|
||||
|
|
||||
&:after { |
|
||||
content: ''; |
|
||||
display: inline-block; |
|
||||
position: absolute; |
|
||||
left: -10px; |
|
||||
top: 18px; |
|
||||
border-left: 10px solid #fff; |
|
||||
border-bottom: 10px solid #f3f3f3; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,596 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback"> |
|
||||
|
|
||||
<!-- tab栏 --> |
|
||||
<u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" /> |
|
||||
|
|
||||
<!-- 订单列表 --> |
|
||||
<view class="order-list"> |
|
||||
<view class="order-item" v-for="(item, index) in list.data" :key="index"> |
|
||||
<view class="item-top"> |
|
||||
<view class="item-top-left"> |
|
||||
<text class="order-time">{{ item.create_time }}</text> |
|
||||
</view> |
|
||||
<view class="item-top-right"> |
|
||||
<text class="state-text">{{ item.state_text }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 商品列表 --> |
|
||||
<view class="goods-list" @click="handleTargetDetail(item.order_id)"> |
|
||||
<view class="goods-item" v-for="(goods, idx) in item.goods" :key="idx"> |
|
||||
<!-- 商品图片 --> |
|
||||
<view class="goods-image"> |
|
||||
<image class="image" :src="goods.goods_image" mode="scaleToFill"></image> |
|
||||
</view> |
|
||||
<!-- 商品信息 --> |
|
||||
<view class="goods-content"> |
|
||||
<view class="goods-title"><text class="twoline-hide">{{ goods.goods_name }}</text></view> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx"> |
|
||||
<text>{{ props.value.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 交易信息 --> |
|
||||
<view class="goods-trade"> |
|
||||
<view class="goods-price"> |
|
||||
<text class="unit">￥</text> |
|
||||
<text class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text> |
|
||||
</view> |
|
||||
<view class="goods-num"> |
|
||||
<text>×{{ goods.total_num }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 订单合计 --> |
|
||||
<view class="order-total"> |
|
||||
<text>共{{ item.total_num }}件商品，总金额</text> |
|
||||
<text class="unit">￥</text> |
|
||||
<text class="money">{{ item.pay_price }}</text> |
|
||||
</view> |
|
||||
<!-- 订单操作 --> |
|
||||
<view v-if="item.order_status != OrderStatusEnum.CANCELLED.value" class="order-handle"> |
|
||||
<view class="btn-group clearfix"> |
|
||||
<!-- 未支付取消订单 --> |
|
||||
<block v-if="item.pay_status == PayStatusEnum.PENDING.value"> |
|
||||
<view class="btn-item" @click="onCancel(item.order_id)">取消</view> |
|
||||
</block> |
|
||||
<!-- 已支付进行中的订单 --> |
|
||||
<block v-if="item.order_status != OrderStatusEnum.APPLY_CANCEL.value"> |
|
||||
<block v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value"> |
|
||||
<view class="btn-item" @click="onCancel(item.order_id)">申请取消</view> |
|
||||
</block> |
|
||||
</block> |
|
||||
<!-- 已申请取消 --> |
|
||||
<view v-else class="f-28 col-8">取消申请中</view> |
|
||||
<!-- 未支付的订单 --> |
|
||||
<block v-if="item.pay_status == PayStatusEnum.PENDING.value"> |
|
||||
<view class="btn-item active" @click="onPay(item.order_id)">去支付</view> |
|
||||
</block> |
|
||||
<!-- 确认收货 --> |
|
||||
<block v-if="item.delivery_status == DeliveryStatusEnum.DELIVERED.value && item.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"> |
|
||||
<view class="btn-item active" @click="onReceipt(item.order_id)">确认收货</view> |
|
||||
</block> |
|
||||
<!-- 订单评价 --> |
|
||||
<block v-if="item.order_status == OrderStatusEnum.COMPLETED.value && item.is_comment == 0"> |
|
||||
<view class="btn-item" @click="handleTargetComment(item.order_id)">评价</view> |
|
||||
</block> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
</view> |
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
|
|
||||
<!-- 支付方式弹窗 --> |
|
||||
<u-popup v-model="showPayPopup" mode="bottom" border-radius="26" :closeable="true"> |
|
||||
<view class="pay-popup"> |
|
||||
<view class="title">请选择支付方式</view> |
|
||||
<view class="pop-content"> |
|
||||
<!-- 微信支付 --> |
|
||||
<!-- #ifdef MP-WEIXIN --> |
|
||||
<view class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.WECHAT.value)"> |
|
||||
<view class="item-left dis-flex flex-y-center"> |
|
||||
<view class="item-left_icon wechat"> |
|
||||
<text class="iconfont icon-wechat-pay"></text> |
|
||||
</view> |
|
||||
<view class="item-left_text"> |
|
||||
<text>{{ PayTypeEnum.WECHAT.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- #endif --> |
|
||||
<!-- 余额支付 --> |
|
||||
<view class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.BALANCE.value)"> |
|
||||
<view class="item-left dis-flex flex-y-center"> |
|
||||
<view class="item-left_icon balance"> |
|
||||
<text class="iconfont icon-balance-pay"></text> |
|
||||
</view> |
|
||||
<view class="item-left_text"> |
|
||||
<text>{{ PayTypeEnum.BALANCE.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-popup> |
|
||||
|
|
||||
</view> |
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { |
|
||||
DeliveryStatusEnum, |
|
||||
DeliveryTypeEnum, |
|
||||
OrderStatusEnum, |
|
||||
PayStatusEnum, |
|
||||
PayTypeEnum, |
|
||||
ReceiptStatusEnum |
|
||||
} from '@/common/enum/order' |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
import * as OrderApi from '@/api/order' |
|
||||
import { wxPayment } from '@/core/app' |
|
||||
|
|
||||
// 每页记录数量 |
|
||||
const pageSize = 15 |
|
||||
|
|
||||
// tab栏数据 |
|
||||
const tabs = [{ |
|
||||
name: `全部`, |
|
||||
value: 'all' |
|
||||
}, { |
|
||||
name: `待支付`, |
|
||||
value: 'payment' |
|
||||
}, { |
|
||||
name: `待发货`, |
|
||||
value: 'delivery' |
|
||||
}, { |
|
||||
name: `待收货`, |
|
||||
value: 'received' |
|
||||
}, { |
|
||||
name: `待评价`, |
|
||||
value: 'comment' |
|
||||
}] |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
DeliveryStatusEnum, |
|
||||
DeliveryTypeEnum, |
|
||||
OrderStatusEnum, |
|
||||
PayStatusEnum, |
|
||||
PayTypeEnum, |
|
||||
ReceiptStatusEnum, |
|
||||
|
|
||||
// 当前页面参数 |
|
||||
options: { dataType: 'all' }, |
|
||||
// tab栏数据 |
|
||||
tabs, |
|
||||
// 当前标签索引 |
|
||||
curTab: 0, |
|
||||
// 订单列表数据 |
|
||||
list: getEmptyPaginateObj(), |
|
||||
|
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于4条才显示无更多数据 |
|
||||
noMoreSize: 4, |
|
||||
// 空布局 |
|
||||
empty: { |
|
||||
tip: '亲，暂无订单记录' |
|
||||
} |
|
||||
}, |
|
||||
// 控制onShow事件是否刷新订单列表 |
|
||||
canReset: false, |
|
||||
// 支付方式弹窗 |
|
||||
showPayPopup: false |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 初始化当前选中的标签 |
|
||||
this.initCurTab(options) |
|
||||
// 注册全局事件订阅: 是否刷新订单列表 |
|
||||
uni.$on('syncRefresh', canReset => { |
|
||||
this.canReset = canReset |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow() { |
|
||||
this.canReset && this.onRefreshList() |
|
||||
this.canReset = false |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面的卸载 |
|
||||
*/ |
|
||||
onUnload() { |
|
||||
// 卸载全局事件订阅 |
|
||||
uni.$off('syncRefresh') |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 初始化当前选中的标签 |
|
||||
initCurTab(options) { |
|
||||
const app = this |
|
||||
if (options.dataType) { |
|
||||
const index = app.tabs.findIndex(item => item.value == options.dataType) |
|
||||
app.curTab = index > -1 ? index : 0 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getOrderList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
// 获取订单列表 |
|
||||
getOrderList(pageNo = 1) { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
OrderApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false }) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = app.initList(result.data.list) |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 初始化订单列表数据 |
|
||||
initList(newList) { |
|
||||
newList.data.forEach(item => { |
|
||||
item.total_num = 0 |
|
||||
item.goods.forEach(goods => { |
|
||||
item.total_num += goods.total_num |
|
||||
}) |
|
||||
}) |
|
||||
return newList |
|
||||
}, |
|
||||
|
|
||||
// 获取当前标签项的值 |
|
||||
getTabValue() { |
|
||||
return this.tabs[this.curTab].value |
|
||||
}, |
|
||||
|
|
||||
// 切换标签项 |
|
||||
onChangeTab(index) { |
|
||||
const app = this |
|
||||
// 设置当前选中的标签 |
|
||||
app.curTab = index |
|
||||
// 刷新订单列表 |
|
||||
app.onRefreshList() |
|
||||
}, |
|
||||
|
|
||||
// 刷新订单列表 |
|
||||
onRefreshList() { |
|
||||
this.list = getEmptyPaginateObj() |
|
||||
setTimeout(() => { |
|
||||
this.mescroll.resetUpScroll() |
|
||||
}, 120) |
|
||||
}, |
|
||||
|
|
||||
// 取消订单 |
|
||||
onCancel(orderId) { |
|
||||
const app = this |
|
||||
uni.showModal({ |
|
||||
title: '友情提示', |
|
||||
content: '确认要取消该订单吗？', |
|
||||
success(o) { |
|
||||
if (o.confirm) { |
|
||||
OrderApi.cancel(orderId) |
|
||||
.then(result => { |
|
||||
// 显示成功信息 |
|
||||
app.$toast(result.message) |
|
||||
// 刷新订单列表 |
|
||||
app.onRefreshList() |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 确认收货 |
|
||||
onReceipt(orderId) { |
|
||||
const app = this |
|
||||
uni.showModal({ |
|
||||
title: '友情提示', |
|
||||
content: '确认收到商品了吗？', |
|
||||
success(o) { |
|
||||
if (o.confirm) { |
|
||||
OrderApi.receipt(orderId) |
|
||||
.then(result => { |
|
||||
// 显示成功信息 |
|
||||
app.$success(result.message) |
|
||||
// 刷新订单列表 |
|
||||
app.onRefreshList() |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 点击去支付 |
|
||||
onPay(orderId) { |
|
||||
// 记录订单id |
|
||||
this.payOrderId = orderId |
|
||||
// 显示支付方式弹窗 |
|
||||
this.showPayPopup = true |
|
||||
}, |
|
||||
|
|
||||
// 选择支付方式 |
|
||||
onSelectPayType(payType) { |
|
||||
const app = this |
|
||||
// 隐藏支付方式弹窗 |
|
||||
this.showPayPopup = false |
|
||||
// 发起支付请求 |
|
||||
OrderApi.pay(app.payOrderId, payType) |
|
||||
.then(result => app.onSubmitCallback(result)) |
|
||||
}, |
|
||||
|
|
||||
// 订单提交成功后回调 |
|
||||
onSubmitCallback(result) { |
|
||||
const app = this |
|
||||
// 发起微信支付 |
|
||||
if (result.data.pay_type == PayTypeEnum.WECHAT.value) { |
|
||||
wxPayment(result.data.payment) |
|
||||
.then(() => { |
|
||||
app.$success('支付成功') |
|
||||
setTimeout(() => { |
|
||||
app.onRefreshList() |
|
||||
}, 1500) |
|
||||
}) |
|
||||
.catch(err => { |
|
||||
app.$error('订单未支付') |
|
||||
}) |
|
||||
.finally(() => { |
|
||||
app.disabled = false |
|
||||
}) |
|
||||
} |
|
||||
// 余额支付 |
|
||||
if (result.data.pay_type == PayTypeEnum.BALANCE.value) { |
|
||||
app.$success('支付成功') |
|
||||
app.disabled = false |
|
||||
setTimeout(() => { |
|
||||
app.onRefreshList() |
|
||||
}, 1500) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 跳转到订单详情页 |
|
||||
handleTargetDetail(orderId) { |
|
||||
this.$navTo('pages/order/detail', { orderId }) |
|
||||
}, |
|
||||
|
|
||||
// 跳转到订单评价页 |
|
||||
handleTargetComment(orderId) { |
|
||||
this.$navTo('pages/order/comment/index', { orderId }) |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
// 项目内容 |
|
||||
.order-item { |
|
||||
margin: 20rpx auto 20rpx auto; |
|
||||
padding: 30rpx 30rpx; |
|
||||
width: 94%; |
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
|
||||
border-radius: 16rpx; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
// 项目顶部 |
|
||||
.item-top { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
font-size: 26rpx; |
|
||||
margin-bottom: 40rpx; |
|
||||
|
|
||||
.order-time { |
|
||||
color: #777; |
|
||||
} |
|
||||
|
|
||||
.state-text { |
|
||||
color: $uni-text-color-active; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品列表 |
|
||||
.goods-list { |
|
||||
|
|
||||
// 商品项 |
|
||||
.goods-item { |
|
||||
display: flex; |
|
||||
margin-bottom: 40rpx; |
|
||||
|
|
||||
// 商品图片 |
|
||||
.goods-image { |
|
||||
width: 180rpx; |
|
||||
height: 180rpx; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 商品内容 |
|
||||
.goods-content { |
|
||||
flex: 1; |
|
||||
padding-left: 16rpx; |
|
||||
padding-top: 16rpx; |
|
||||
|
|
||||
.goods-title { |
|
||||
font-size: 26rpx; |
|
||||
max-height: 76rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-props { |
|
||||
margin-top: 14rpx; |
|
||||
height: 40rpx; |
|
||||
color: #ababab; |
|
||||
font-size: 24rpx; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
display: inline-block; |
|
||||
margin-right: 14rpx; |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background-color: #F5F5F5; |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 交易信息 |
|
||||
.goods-trade { |
|
||||
padding-top: 16rpx; |
|
||||
width: 150rpx; |
|
||||
text-align: right; |
|
||||
color: $uni-text-color-grey; |
|
||||
font-size: 26rpx; |
|
||||
|
|
||||
.goods-price { |
|
||||
vertical-align: bottom; |
|
||||
margin-bottom: 16rpx; |
|
||||
|
|
||||
.unit { |
|
||||
margin-right: -2rpx; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 订单合计 |
|
||||
.order-total { |
|
||||
font-size: 26rpx; |
|
||||
vertical-align: bottom; |
|
||||
text-align: right; |
|
||||
height: 40rpx; |
|
||||
margin-bottom: 30rpx; |
|
||||
|
|
||||
.unit { |
|
||||
margin-left: 8rpx; |
|
||||
margin-right: -2rpx; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
|
|
||||
.money { |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 订单操作 |
|
||||
.order-handle { |
|
||||
.btn-group { |
|
||||
|
|
||||
.btn-item { |
|
||||
border-radius: 10rpx; |
|
||||
padding: 6rpx 20rpx; |
|
||||
margin-left: 15rpx; |
|
||||
font-size: 28rpx; |
|
||||
float: right; |
|
||||
color: #383838; |
|
||||
border: 1rpx solid #a8a8a8; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
|
|
||||
&.active { |
|
||||
color: $uni-text-color-active; |
|
||||
border: 1rpx solid $uni-text-color-active; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
// 弹出层-支付方式 |
|
||||
.pay-popup { |
|
||||
padding: 24rpx; |
|
||||
|
|
||||
.title { |
|
||||
font-size: 30rpx; |
|
||||
margin-bottom: 40rpx; |
|
||||
font-weight: bold; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.pop-content { |
|
||||
min-height: 260rpx; |
|
||||
padding: 0 10rpx; |
|
||||
|
|
||||
.pay-item { |
|
||||
padding: 24rpx 35rpx; |
|
||||
font-size: 28rpx; |
|
||||
border-bottom: 1rpx solid #f1f1f1; |
|
||||
|
|
||||
&:last-child { |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
|
|
||||
.item-left_icon { |
|
||||
margin-right: 20rpx; |
|
||||
font-size: 32rpx; |
|
||||
|
|
||||
&.wechat { |
|
||||
color: #00c800; |
|
||||
} |
|
||||
|
|
||||
&.balance { |
|
||||
color: #ff9700; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,127 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" |
|
||||
@up="upCallback"> |
|
||||
<view class="log-list"> |
|
||||
<view v-for="(item, index) in list.data" :key="index" class="log-item"> |
|
||||
<view class="item-left flex-box"> |
|
||||
<view class="rec-status"> |
|
||||
<text>{{ item.describe }}</text> |
|
||||
</view> |
|
||||
<view class="rec-time"> |
|
||||
<text>{{ item.create_time }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item-right" :class="[item.value > 0 ? 'col-green' : 'col-6']"> |
|
||||
<text>{{ item.value > 0 ? '+' : '' }}{{ item.value }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import * as LogApi from '@/api/points/log' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
|
|
||||
const pageSize = 15 |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 充值记录 |
|
||||
list: getEmptyPaginateObj(), |
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于12条才显示无更多数据 |
|
||||
noMoreSize: 12, |
|
||||
// 空布局 |
|
||||
empty: { |
|
||||
tip: '亲，暂无相关数据' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) {}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getLogList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
// 获取积分明细列表 |
|
||||
getLogList(pageNo = 1) { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
LogApi.list({ page: pageNo }) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = result.data.list |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
page, |
|
||||
.container { |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.log-list { |
|
||||
padding: 0 30rpx; |
|
||||
} |
|
||||
|
|
||||
.log-item { |
|
||||
font-size: 28rpx; |
|
||||
padding: 20rpx 20rpx; |
|
||||
line-height: 1.8; |
|
||||
border-bottom: 1rpx solid rgb(238, 238, 238); |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.rec-status { |
|
||||
color: #333; |
|
||||
|
|
||||
.rec-time { |
|
||||
color: rgb(160, 160, 160); |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,429 +0,0 @@ |
|||||
<template> |
|
||||
<view v-if="!isLoading" class="container"> |
|
||||
|
|
||||
<!-- 商品详情 --> |
|
||||
<view class="goods-detail b-f dis-flex flex-dir-row"> |
|
||||
<view class="left"> |
|
||||
<image class="goods-image" :src="goods.goods_image"></image> |
|
||||
</view> |
|
||||
<view class="right dis-flex flex-box flex-dir-column flex-x-around"> |
|
||||
<view class="goods-name"> |
|
||||
<text class="twoline-hide">{{ goods.goods_name }}</text> |
|
||||
</view> |
|
||||
<view class="dis-flex col-9 f-24"> |
|
||||
<view class="flex-box"> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx"> |
|
||||
<text>{{ props.value.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<text class="t-r">×{{ goods.total_num }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 服务类型 --> |
|
||||
<view class="row-service b-f m-top20"> |
|
||||
<view class="row-title">服务类型</view> |
|
||||
<view class="service-switch dis-flex"> |
|
||||
<view class="switch-item" v-for="(item, index) in RefundTypeEnum.data" :key="index" :class="{ active: formData.type == item.value }" |
|
||||
@click="onSwitchService(item.value)">{{ item.name }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 申请原因 --> |
|
||||
<view class="row-textarea b-f m-top20"> |
|
||||
<view class="row-title">申请原因</view> |
|
||||
<view class="content"> |
|
||||
<textarea class="textarea" v-model="formData.content" maxlength="2000" placeholder="请详细填写申请原因，注意保持商品的完好，建议您先与卖家沟通" |
|
||||
placeholderStyle="color:#ccc"></textarea> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 退款金额 --> |
|
||||
<view v-if="formData.type == RefundTypeEnum.RETURN.value" class="row-money b-f m-top20 dis-flex"> |
|
||||
<view class="row-title">退款金额</view> |
|
||||
<view class="money col-m">￥{{ goods.total_pay_price }}</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 上传凭证 --> |
|
||||
<view class="row-voucher b-f m-top20"> |
|
||||
<view class="row-title">上传凭证 (最多6张)</view> |
|
||||
<view class="image-list"> |
|
||||
<!-- 图片列表 --> |
|
||||
<view class="image-preview" v-for="(image, imageIndex) in imageList" :key="imageIndex"> |
|
||||
<text class="image-delete iconfont icon-shanchu" @click="deleteImage(imageIndex)"></text> |
|
||||
<image class="image" mode="aspectFill" :src="image.path"></image> |
|
||||
</view> |
|
||||
<!-- 上传图片 --> |
|
||||
<view v-if="imageList.length < maxImageLength" class="image-picker" @click="chooseImage()"> |
|
||||
<text class="choose-icon iconfont icon-camera"></text> |
|
||||
<text class="choose-text">上传图片</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 底部操作按钮 --> |
|
||||
<view class="footer-fixed"> |
|
||||
<view class="btn-wrapper"> |
|
||||
<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">确认提交</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { RefundTypeEnum } from '@/common/enum/order/refund' |
|
||||
import * as UploadApi from '@/api/upload' |
|
||||
import * as RefundApi from '@/api/refund' |
|
||||
|
|
||||
const maxImageLength = 6 |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
RefundTypeEnum, |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 订单商品id |
|
||||
orderGoodsId: null, |
|
||||
// 订单商品详情 |
|
||||
goods: {}, |
|
||||
// 表单数据 |
|
||||
formData: { |
|
||||
// 图片上传成功的文件ID集 |
|
||||
images: [], |
|
||||
// 服务类型 |
|
||||
type: 10, |
|
||||
// 申请原因 |
|
||||
content: '' |
|
||||
}, |
|
||||
// 用户选择的图片列表 |
|
||||
imageList: [], |
|
||||
// 最大图片数量 |
|
||||
maxImageLength, |
|
||||
// 按钮禁用 |
|
||||
disabled: false |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad({ orderGoodsId }) { |
|
||||
this.orderGoodsId = orderGoodsId |
|
||||
// 获取订单商品详情 |
|
||||
this.getGoodsDetail() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取订单商品详情 |
|
||||
getGoodsDetail() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
RefundApi.goods(app.orderGoodsId) |
|
||||
.then(result => { |
|
||||
app.goods = result.data.goods |
|
||||
app.isLoading = false |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 切换类型 |
|
||||
onSwitchService(value) { |
|
||||
this.formData.type = value |
|
||||
}, |
|
||||
|
|
||||
// 选择图片 |
|
||||
chooseImage() { |
|
||||
const app = this |
|
||||
const oldImageList = app.imageList |
|
||||
// 选择图片 |
|
||||
uni.chooseImage({ |
|
||||
count: maxImageLength - oldImageList.length, |
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
|
||||
success({ tempFiles }) { |
|
||||
// tempFiles = [{path:'xxx', size:100}] |
|
||||
app.imageList = oldImageList.concat(tempFiles) |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 删除图片 |
|
||||
deleteImage(imageIndex) { |
|
||||
this.imageList.splice(imageIndex, 1) |
|
||||
}, |
|
||||
|
|
||||
// 表单提交 |
|
||||
handleSubmit() { |
|
||||
const app = this |
|
||||
const { imageList } = app |
|
||||
// 判断是否重复提交 |
|
||||
if (app.disabled === true) return false |
|
||||
// 按钮禁用 |
|
||||
app.disabled = true |
|
||||
// 判断是否需要上传图片 |
|
||||
if (imageList.length > 0) { |
|
||||
app.uploadFile() |
|
||||
.then(() => app.onSubmit()) |
|
||||
.catch(err => { |
|
||||
app.disabled = false |
|
||||
if (err.statusCode !== 0) { |
|
||||
app.$toast(err.errMsg) |
|
||||
} |
|
||||
console.log('err', err) |
|
||||
}) |
|
||||
} else { |
|
||||
app.onSubmit() |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 提交到后端 |
|
||||
onSubmit() { |
|
||||
const app = this |
|
||||
RefundApi.apply(app.orderGoodsId, app.formData) |
|
||||
.then(result => { |
|
||||
app.$toast(result.message) |
|
||||
setTimeout(() => { |
|
||||
app.disabled = false |
|
||||
uni.navigateBack() |
|
||||
}, 1500) |
|
||||
}) |
|
||||
.catch(err => app.disabled = false) |
|
||||
}, |
|
||||
|
|
||||
// 上传图片 |
|
||||
uploadFile() { |
|
||||
const app = this |
|
||||
const { imageList } = app |
|
||||
// 批量上传 |
|
||||
return new Promise((resolve, reject) => { |
|
||||
if (imageList.length > 0) { |
|
||||
UploadApi.image(imageList) |
|
||||
.then(fileIds => { |
|
||||
app.formData.images = fileIds |
|
||||
resolve(fileIds) |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
} else { |
|
||||
resolve() |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.container { |
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx); |
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); |
|
||||
} |
|
||||
|
|
||||
.row-title { |
|
||||
color: #888; |
|
||||
margin-bottom: 20rpx; |
|
||||
} |
|
||||
|
|
||||
// 商品信息 |
|
||||
.goods-detail { |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
|
||||
.left { |
|
||||
.goods-image { |
|
||||
display: block; |
|
||||
width: 150rpx; |
|
||||
height: 150rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.right { |
|
||||
padding-left: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-props { |
|
||||
margin-top: 14rpx; |
|
||||
height: 40rpx; |
|
||||
color: #ababab; |
|
||||
font-size: 24rpx; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
display: inline-block; |
|
||||
margin-right: 14rpx; |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background-color: #F5F5F5; |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 服务类型 */ |
|
||||
.row-service { |
|
||||
padding: 24rpx 20rpx; |
|
||||
} |
|
||||
|
|
||||
.service-switch { |
|
||||
.switch-item { |
|
||||
padding: 6rpx 30rpx; |
|
||||
margin-right: 25rpx; |
|
||||
border-radius: 10rpx; |
|
||||
border: 1px solid rgb(177, 177, 177); |
|
||||
color: #888; |
|
||||
|
|
||||
&.active { |
|
||||
color: #fc1e56; |
|
||||
border: 1px solid #fc1e56; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 申请原因 */ |
|
||||
.row-textarea { |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
|
||||
.textarea { |
|
||||
width: 100%; |
|
||||
height: 220rpx; |
|
||||
padding: 12rpx; |
|
||||
border: 1rpx solid #e8e8e8; |
|
||||
border-radius: 5rpx; |
|
||||
box-sizing: border-box; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 退款金额 */ |
|
||||
.row-money { |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
|
||||
.row-title { |
|
||||
margin-bottom: 0; |
|
||||
margin-right: 30rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 上传凭证 |
|
||||
.row-voucher { |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
|
||||
.image-list { |
|
||||
padding: 0 20rpx; |
|
||||
margin-top: 20rpx; |
|
||||
margin-bottom: -20rpx; |
|
||||
|
|
||||
&:after { |
|
||||
clear: both; |
|
||||
content: " "; |
|
||||
display: table; |
|
||||
} |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.image-picker, |
|
||||
.image-preview { |
|
||||
width: 184rpx; |
|
||||
height: 184rpx; |
|
||||
margin-right: 30rpx; |
|
||||
margin-bottom: 30rpx; |
|
||||
float: left; |
|
||||
|
|
||||
&:nth-child(3n+0) { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.image-picker { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
border: 1rpx dashed #ccc; |
|
||||
color: #ccc; |
|
||||
|
|
||||
.choose-icon { |
|
||||
font-size: 48rpx; |
|
||||
margin-bottom: 6rpx; |
|
||||
} |
|
||||
|
|
||||
.choose-text { |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.image-preview { |
|
||||
position: relative; |
|
||||
|
|
||||
.image-delete { |
|
||||
position: absolute; |
|
||||
top: -15rpx; |
|
||||
right: -15rpx; |
|
||||
height: 42rpx; |
|
||||
width: 42rpx; |
|
||||
line-height: 42rpx; |
|
||||
background: rgba(0, 0, 0, 0.64); |
|
||||
border-radius: 50%; |
|
||||
color: #fff; |
|
||||
font-weight: bolder; |
|
||||
font-size: 22rpx; |
|
||||
z-index: 10; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
// 底部操作栏 |
|
||||
.footer-fixed { |
|
||||
position: fixed; |
|
||||
bottom: var(--window-bottom); |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
z-index: 11; |
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24); |
|
||||
background: #fff; |
|
||||
|
|
||||
// 设置ios刘海屏底部横线安全区域 |
|
||||
padding-bottom: constant(safe-area-inset-bottom); |
|
||||
padding-bottom: env(safe-area-inset-bottom); |
|
||||
|
|
||||
.btn-wrapper { |
|
||||
height: 120rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 0 20rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-item { |
|
||||
flex: 1; |
|
||||
font-size: 28rpx; |
|
||||
height: 80rpx; |
|
||||
line-height: 80rpx; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
border-radius: 50rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-item-main { |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
|
|
||||
// 禁用按钮 |
|
||||
&.disabled { |
|
||||
background: #ff9779; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,483 +0,0 @@ |
|||||
<template> |
|
||||
<view v-if="!isLoading" class="container p-bottom"> |
|
||||
|
|
||||
<!-- 顶部状态栏 --> |
|
||||
<view class="detail-header dis-flex flex-y-center"> |
|
||||
<view class="header-backdrop"> |
|
||||
<image class="image" src="/static/order/refund-bg.png"></image> |
|
||||
</view> |
|
||||
<view class="header-state"> |
|
||||
<text class="f-32 col-f">{{ detail.state_text }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品详情 --> |
|
||||
<view class="detail-goods b-f m-top20 dis-flex flex-dir-row" @click="onGoodsDetail(detail.orderGoods.goods_id)"> |
|
||||
<view class="left"> |
|
||||
<image class="goods-image" :src="detail.orderGoods.goods_image"></image> |
|
||||
</view> |
|
||||
<view class="right dis-flex flex-box flex-dir-column flex-x-around"> |
|
||||
<view class="goods-name"> |
|
||||
<text class="twoline-hide">{{ detail.orderGoods.goods_name }}</text> |
|
||||
</view> |
|
||||
<view class="dis-flex col-9 f-24"> |
|
||||
<view class="flex-box"> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in detail.orderGoods.goods_props" :key="idx"> |
|
||||
<text>{{ props.value.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<text class="t-r">×{{ detail.orderGoods.total_num }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商品金额 --> |
|
||||
<view class="detail-order b-f row-block"> |
|
||||
<view class="item dis-flex flex-x-end flex-y-center"> |
|
||||
<text class="">商品金额：</text> |
|
||||
<text class="col-m">￥{{ detail.orderGoods.total_pay_price }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 已退款金额 --> |
|
||||
<view v-if="detail.status == RefundStatusEnum.COMPLETED.value && detail.type == 10" |
|
||||
class="detail-order b-f row-block dis-flex flex-x-end flex-y-center"> |
|
||||
<text class="">已退款金额：</text> |
|
||||
<text class="col-m">￥{{ detail.refund_money }}</text> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 售后信息 --> |
|
||||
<view v-if="detail.status == RefundStatusEnum.REJECTED.value" class="detail-refund b-f m-top20"> |
|
||||
<view class="detail-refund__row dis-flex"> |
|
||||
<view class="text"> |
|
||||
<text>售后类型：</text> |
|
||||
</view> |
|
||||
<view class="flex-box"> |
|
||||
<text>{{ RefundTypeEnum[detail.type].name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="detail-refund__row dis-flex"> |
|
||||
<view class="text"> |
|
||||
<text>申请原因：</text> |
|
||||
</view> |
|
||||
<view class="flex-box"> |
|
||||
<text>{{ detail.apply_desc }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view v-if="detail.images.length > 0" class="detail-refund__row dis-flex"> |
|
||||
<view class="text"> |
|
||||
<text>申请凭证：</text> |
|
||||
</view> |
|
||||
<view class="image-list flex-box"> |
|
||||
<view class="image-preview" v-for="(item, index) in detail.images" :key="index"> |
|
||||
<image class="image" mode="aspectFill" :src="item.image_url" @click="handlePreviewImages(index)"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 售后信息 --> |
|
||||
<view v-if="detail.status.value == RefundStatusEnum.REJECTED.value" class="detail-refund b-f m-top20"> |
|
||||
<view class="detail-refund__row dis-flex"> |
|
||||
<view class="text"> |
|
||||
<text class="col-m">拒绝原因：</text> |
|
||||
</view> |
|
||||
<view class="flex-box"> |
|
||||
<text>{{ detail.refuse_desc }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 退货物流信息 --> |
|
||||
<view v-if="detail.audit_status == AuditStatusEnum.REVIEWED.value && detail.is_user_send" |
|
||||
class="detail-address b-f m-top20"> |
|
||||
<view class="detail-address__row address-title"> |
|
||||
<text class="col-m">退货物流信息</text> |
|
||||
</view> |
|
||||
<view class="detail-address__row address-details"> |
|
||||
<view class="address-details__row"> |
|
||||
<text>物流公司：{{ detail.express.express_name }}</text> |
|
||||
</view> |
|
||||
<view class="address-details__row"> |
|
||||
<text>物流单号：{{ detail.express_no }}</text> |
|
||||
</view> |
|
||||
<!-- <view class="address-details__row"> |
|
||||
<text>发货状态：{{ detail.is_user_send ? '已发货' : '未发货' }}</text> |
|
||||
</view> --> |
|
||||
<view class="address-details__row"> |
|
||||
<text>发货时间：{{ detail.send_time }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 商家收货地址 --> |
|
||||
<view v-if="detail.audit_status == AuditStatusEnum.REVIEWED.value" class="detail-address b-f m-top20"> |
|
||||
<view class="detail-address__row address-title"> |
|
||||
<text class="col-m">商家退货地址</text> |
|
||||
</view> |
|
||||
<view class="detail-address__row address-details"> |
|
||||
<view class="address-details__row"> |
|
||||
<text>收货人：{{ detail.address.name }}</text> |
|
||||
</view> |
|
||||
<view class="address-details__row"> |
|
||||
<text>联系电话：{{ detail.address.phone }}</text> |
|
||||
</view> |
|
||||
<view class="address-details__row dis-flex"> |
|
||||
<view class="text"> |
|
||||
<text>详细地址：</text> |
|
||||
</view> |
|
||||
<view class="address flex-box"> |
|
||||
<text class="region" v-for="(region, idx) in detail.address.region" :key="idx">{{ region }}</text> |
|
||||
<text class="detail">{{ detail.address.detail }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="detail-address__row address-tips"> |
|
||||
<view class="f-26 col-9"> |
|
||||
<text>· 未与卖家协商一致情况下，请勿寄到付或平邮</text> |
|
||||
</view> |
|
||||
<view class="f-26 col-9"> |
|
||||
<text>· 请填写真实有效物流信息</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 填写物流信息 --> |
|
||||
<form |
|
||||
v-if="detail.type == RefundTypeEnum.RETURN.value && detail.audit_status == AuditStatusEnum.REVIEWED.value && !detail.is_user_send" |
|
||||
@submit="onSubmit()"> |
|
||||
<view class="detail-express b-f m-top20"> |
|
||||
<view class="form-group dis-flex flex-y-center"> |
|
||||
<view class="field">物流公司：</view> |
|
||||
<view class="flex-box"> |
|
||||
<picker mode="selector" :range="expressList" range-key="express_name" :value="expressIndex" |
|
||||
@change="onChangeExpress"> |
|
||||
<text v-if="expressIndex > -1">{{ expressList[expressIndex].express_name }}</text> |
|
||||
<text v-else class="col-80">请选择物流公司</text> |
|
||||
</picker> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="form-group dis-flex flex-y-center"> |
|
||||
<view class="field">物流单号：</view> |
|
||||
<view class="flex-box"> |
|
||||
<input class="input" v-model="formData.expressNo" placeholder="请填写物流单号"></input> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 操作按钮 --> |
|
||||
<view class="footer"> |
|
||||
<view class="btn-wrapper"> |
|
||||
<button class="btn-item btn-item-main btn-normal" :class="{ disabled }" formType="submit">确认发货</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
</form> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { AuditStatusEnum, RefundStatusEnum, RefundTypeEnum } from '@/common/enum/order/refund' |
|
||||
import * as RefundApi from '@/api/refund' |
|
||||
import * as ExpressApi from '@/api/express' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 枚举类 |
|
||||
AuditStatusEnum, |
|
||||
RefundStatusEnum, |
|
||||
RefundTypeEnum, |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 售后单ID |
|
||||
orderRefundId: null, |
|
||||
// 售后单详情 |
|
||||
detail: {}, |
|
||||
// 物流公司列表 |
|
||||
expressList: [], |
|
||||
// 表单数据 |
|
||||
formData: { |
|
||||
// 物流公司ID |
|
||||
expressId: null, |
|
||||
// 物流单号 |
|
||||
expressNo: '' |
|
||||
}, |
|
||||
// 选择的物流公司索引 |
|
||||
expressIndex: -1, |
|
||||
// 按钮禁用 |
|
||||
disabled: false |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad({ orderRefundId }) { |
|
||||
// 售后单ID |
|
||||
this.orderRefundId = orderRefundId |
|
||||
// 获取页面数据 |
|
||||
this.getPageData() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取页面数据 |
|
||||
getPageData() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
Promise.all([app.getRefundDetail(), app.getExpressList()]) |
|
||||
.then(result => { |
|
||||
app.isLoading = false |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取售后单详情 |
|
||||
getRefundDetail() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
RefundApi.detail(app.orderRefundId) |
|
||||
.then(result => { |
|
||||
app.detail = result.data.detail |
|
||||
resolve() |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取物流公司列表 |
|
||||
getExpressList() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
ExpressApi.list() |
|
||||
.then(result => { |
|
||||
app.expressList = result.data.list |
|
||||
resolve() |
|
||||
}) |
|
||||
.catch(reject) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 跳转商品详情页 |
|
||||
onGoodsDetail(goodsId) { |
|
||||
this.$navTo('pages/goods/detail', { goodsId }) |
|
||||
}, |
|
||||
|
|
||||
// 凭证图片预览 |
|
||||
handlePreviewImages(index) { |
|
||||
const { detail: { images } } = this |
|
||||
const imageUrls = images.map(item => item.image_url) |
|
||||
uni.previewImage({ |
|
||||
current: imageUrls[index], |
|
||||
urls: imageUrls |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 选择物流公司 |
|
||||
onChangeExpress(e) { |
|
||||
const expressIndex = e.detail.value |
|
||||
const { expressList } = this |
|
||||
this.expressIndex = expressIndex |
|
||||
this.formData.expressId = expressList[expressIndex].express_id |
|
||||
}, |
|
||||
|
|
||||
// 表单提交 |
|
||||
onSubmit() { |
|
||||
const app = this |
|
||||
// 判断是否重复提交 |
|
||||
if (app.disabled === true) return false |
|
||||
// 按钮禁用 |
|
||||
app.disabled = true |
|
||||
// 提交到后端 |
|
||||
RefundApi.delivery(app.orderRefundId, app.formData) |
|
||||
.then(result => { |
|
||||
app.$toast(result.message) |
|
||||
setTimeout(() => { |
|
||||
app.disabled = false |
|
||||
uni.navigateBack() |
|
||||
}, 1500) |
|
||||
}) |
|
||||
.catch(err => app.disabled = false) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
// 顶部状态栏 |
|
||||
.detail-header { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 140rpx; |
|
||||
|
|
||||
.header-backdrop { |
|
||||
width: 100%; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
z-index: 0; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 140rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.header-state { |
|
||||
z-index: 1; |
|
||||
padding: 0 50rpx; |
|
||||
} |
|
||||
|
|
||||
/* 商品详情 */ |
|
||||
.detail-goods { |
|
||||
padding: 24rpx 20rpx; |
|
||||
|
|
||||
.left { |
|
||||
.goods-image { |
|
||||
display: block; |
|
||||
width: 150rpx; |
|
||||
height: 150rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.right { |
|
||||
padding-left: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.goods-props { |
|
||||
margin-top: 14rpx; |
|
||||
height: 40rpx; |
|
||||
color: #ababab; |
|
||||
font-size: 24rpx; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
display: inline-block; |
|
||||
margin-right: 14rpx; |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background-color: #F5F5F5; |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.detail-order { |
|
||||
padding: 15rpx 20rpx; |
|
||||
font-size: 26rpx; |
|
||||
|
|
||||
.item { |
|
||||
margin-bottom: 10rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 售后详情 */ |
|
||||
.detail-refund { |
|
||||
padding: 15rpx 20rpx; |
|
||||
} |
|
||||
|
|
||||
.detail-refund__row { |
|
||||
margin: 20rpx 0; |
|
||||
} |
|
||||
|
|
||||
/* 申请凭证 */ |
|
||||
.image-list { |
|
||||
margin-bottom: -15rpx; |
|
||||
|
|
||||
.image-preview { |
|
||||
margin: 0 15rpx 15rpx 0; |
|
||||
float: left; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 180rpx; |
|
||||
height: 180rpx; |
|
||||
} |
|
||||
|
|
||||
&:nth-child(3n+0) { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 商家收货地址 */ |
|
||||
.detail-address { |
|
||||
padding: 20rpx 34rpx; |
|
||||
} |
|
||||
|
|
||||
.address-details { |
|
||||
padding: 8rpx 0; |
|
||||
border-bottom: 1px solid #eee; |
|
||||
|
|
||||
.address-details__row { |
|
||||
margin: 14rpx 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.address-tips { |
|
||||
margin-top: 16rpx; |
|
||||
line-height: 46rpx; |
|
||||
} |
|
||||
|
|
||||
.detail-address__row { |
|
||||
// margin: 18rpx 0; |
|
||||
} |
|
||||
|
|
||||
/* 填写物流信息 */ |
|
||||
.detail-express { |
|
||||
padding: 10rpx 30rpx; |
|
||||
} |
|
||||
|
|
||||
.form-group { |
|
||||
height: 60rpx; |
|
||||
margin: 14rpx 0; |
|
||||
|
|
||||
.input { |
|
||||
height: 100%; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* 底部操作栏 */ |
|
||||
|
|
||||
.footer { |
|
||||
margin-top: 60rpx; |
|
||||
|
|
||||
.btn-wrapper { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 0 20rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-item { |
|
||||
flex: 1; |
|
||||
font-size: 28rpx; |
|
||||
height: 80rpx; |
|
||||
color: #fff; |
|
||||
border-radius: 50rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.btn-item-main { |
|
||||
background: linear-gradient(to right, #f9211c, #ff6335); |
|
||||
|
|
||||
// 禁用按钮 |
|
||||
&.disabled { |
|
||||
background: #ff9779; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,263 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" |
|
||||
:up="upOption" @up="upCallback"> |
|
||||
|
|
||||
<!-- tab栏 --> |
|
||||
<u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" |
|
||||
@change="onChangeTab" /> |
|
||||
|
|
||||
<!-- 退款/售后单 --> |
|
||||
<view class="widget-list"> |
|
||||
<view class="widget-detail" v-for="(item, index) in list.data" :key="index"> |
|
||||
<view class="row-block dis-flex flex-y-center"> |
|
||||
<view class="flex-box">{{ item.create_time }}</view> |
|
||||
<view class="flex-box t-r"> |
|
||||
<text class="col-m">{{ item.state_text }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="detail-goods row-block dis-flex" @click.stop="handleTargetDetail(item.order_refund_id)"> |
|
||||
<view class="goods-image"> |
|
||||
<image class="image" :src="item.orderGoods.goods_image" mode="aspectFit"></image> |
|
||||
</view> |
|
||||
<view class="goods-right flex-box"> |
|
||||
<view class="goods-name"> |
|
||||
<text class="twoline-hide">{{ item.orderGoods.goods_name }}</text> |
|
||||
</view> |
|
||||
<view class="goods-props clearfix"> |
|
||||
<view class="goods-props-item" v-for="(props, idx) in item.orderGoods.goods_props" :key="idx"> |
|
||||
<text>{{ props.value.name }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="goods-num t-r"> |
|
||||
<text class="f-26 col-8">×{{ item.orderGoods.total_num }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="detail-order row-block"> |
|
||||
<view class="item dis-flex flex-x-end flex-y-center"> |
|
||||
<text class="">付款金额：</text> |
|
||||
<text class="col-m">￥{{ item.orderGoods.total_pay_price }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="detail-operate row-block dis-flex flex-x-end flex-y-center"> |
|
||||
<view class="detail-btn btn-detail" @click.stop="handleTargetDetail(item.order_refund_id)">查看详情</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
</mescroll-body> |
|
||||
|
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
import * as RefundApi from '@/api/refund' |
|
||||
|
|
||||
// 每页记录数量 |
|
||||
const pageSize = 15 |
|
||||
|
|
||||
// tab栏数据 |
|
||||
const tabs = [{ |
|
||||
name: '全部', |
|
||||
value: -1 |
|
||||
}, { |
|
||||
name: '待处理', |
|
||||
value: 0 |
|
||||
}] |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 订单列表数据 |
|
||||
list: getEmptyPaginateObj(), |
|
||||
// tabs栏数据 |
|
||||
tabs, |
|
||||
// 当前标签索引 |
|
||||
curTab: 0, |
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于2条才显示无更多数据 |
|
||||
noMoreSize: 2, |
|
||||
// 空布局 |
|
||||
empty: { |
|
||||
tip: '亲，暂无售后单记录' |
|
||||
} |
|
||||
}, |
|
||||
// 控制首次触发onShow事件时不刷新列表 |
|
||||
canReset: false, |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow() { |
|
||||
this.canReset && this.onRefreshList() |
|
||||
// this.canReset = true |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getRefundList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
// 获取退款/售后单列表 |
|
||||
getRefundList(pageNo = 1) { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
RefundApi.list({ state: app.getTabValue(), page: pageNo }, { load: false }) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = result.data.list |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 切换标签项 |
|
||||
onChangeTab(index) { |
|
||||
const app = this |
|
||||
// 设置当前选中的标签 |
|
||||
app.curTab = index |
|
||||
// 刷新售后单列表 |
|
||||
app.onRefreshList() |
|
||||
}, |
|
||||
|
|
||||
// 刷新订单列表 |
|
||||
onRefreshList() { |
|
||||
this.list = getEmptyPaginateObj() |
|
||||
setTimeout(() => { |
|
||||
this.mescroll.resetUpScroll() |
|
||||
}, 120) |
|
||||
}, |
|
||||
|
|
||||
// 获取当前标签项的值 |
|
||||
getTabValue() { |
|
||||
return this.tabs[this.curTab].value |
|
||||
}, |
|
||||
|
|
||||
// 跳转到售后单详情页 |
|
||||
handleTargetDetail(orderRefundId) { |
|
||||
this.$navTo('pages/refund/detail', { orderRefundId }) |
|
||||
}, |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.widget-detail { |
|
||||
box-sizing: border-box; |
|
||||
background: #fff; |
|
||||
margin-bottom: 20rpx; |
|
||||
|
|
||||
.row-block { |
|
||||
padding: 0 20rpx; |
|
||||
min-height: 70rpx; |
|
||||
} |
|
||||
|
|
||||
.detail-goods { |
|
||||
padding: 20rpx; |
|
||||
background: #f9f9f9; |
|
||||
|
|
||||
.goods-image { |
|
||||
margin-right: 20rpx; |
|
||||
|
|
||||
.image { |
|
||||
display: block; |
|
||||
width: 200rpx; |
|
||||
height: 200rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.goods-right { |
|
||||
padding: 15rpx 0; |
|
||||
} |
|
||||
|
|
||||
.goods-name { |
|
||||
margin-bottom: 10rpx; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.goods-props { |
|
||||
margin-top: 14rpx; |
|
||||
height: 40rpx; |
|
||||
color: #ababab; |
|
||||
font-size: 24rpx; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.goods-props-item { |
|
||||
display: inline-block; |
|
||||
margin-right: 14rpx; |
|
||||
padding: 4rpx 16rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background-color: #F5F5F5; |
|
||||
width: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.detail-operate { |
|
||||
padding-bottom: 20rpx; |
|
||||
|
|
||||
.detail-btn { |
|
||||
border-radius: 4px; |
|
||||
border: 1rpx solid #ccc; |
|
||||
padding: 8rpx 20rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: #555; |
|
||||
margin-left: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.detail-order { |
|
||||
padding: 10rpx 20rpx; |
|
||||
font-size: 26rpx; |
|
||||
line-height: 50rpx; |
|
||||
height: 50rpx; |
|
||||
|
|
||||
.item { |
|
||||
margin-bottom: 10rpx; |
|
||||
|
|
||||
&:last-child { |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,227 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<view class="search-wrapper"> |
|
||||
<view class="search-input"> |
|
||||
<view class="search-input-wrapper"> |
|
||||
<view class="left"> |
|
||||
<text class="search-icon iconfont icon-search"></text> |
|
||||
</view> |
|
||||
<view class="right"> |
|
||||
<input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" type="text"></input> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="search-button"> |
|
||||
<view class="button" @click="onSearch">搜索</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="history" v-if="historySearch.length"> |
|
||||
<view class="his-head"> |
|
||||
<text class="title">最近搜索</text> |
|
||||
<text class="icon iconfont icon-delete" @click="clearSearch"></text> |
|
||||
</view> |
|
||||
<view class="his-list"> |
|
||||
<view class="his-item" v-for="(val, index) in historySearch" :key="index"> |
|
||||
<view class="history-button" @click="handleQuick(val)">{{ val }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- </view> --> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
const HISTORY_SEARCH = 'historySearch' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
historySearch: [], |
|
||||
searchValue: '' |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 获取历史搜索 |
|
||||
this.historySearch = this.getHistorySearch() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 获取历史搜索 |
|
||||
*/ |
|
||||
getHistorySearch() { |
|
||||
return uni.getStorageSync(HISTORY_SEARCH) || [] |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 搜索提交 |
|
||||
*/ |
|
||||
onSearch() { |
|
||||
const { searchValue } = this |
|
||||
if (searchValue) { |
|
||||
// 记录历史搜索 |
|
||||
this.setHistory(searchValue) |
|
||||
// 跳转到商品列表页 |
|
||||
this.$navTo('pages/goods/list', { search: searchValue }) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 记录历史搜索 |
|
||||
*/ |
|
||||
setHistory(searchValue) { |
|
||||
const data = this.getHistorySearch() |
|
||||
const index = data.indexOf(searchValue) |
|
||||
index > -1 && data.splice(index, 1) |
|
||||
data.unshift(searchValue) |
|
||||
this.historySearch = data |
|
||||
this.onUpdateStorage() |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 清空最近搜索记录 |
|
||||
*/ |
|
||||
clearSearch() { |
|
||||
this.historySearch = [] |
|
||||
this.onUpdateStorage() |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 更新历史搜索缓存 |
|
||||
* @param {Object} data |
|
||||
*/ |
|
||||
onUpdateStorage(data) { |
|
||||
uni.setStorageSync(HISTORY_SEARCH, this.historySearch) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 跳转到最近搜索 |
|
||||
*/ |
|
||||
handleQuick(search) { |
|
||||
this.$navTo('pages/goods/list', { search }) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.container { |
|
||||
padding: 20rpx; |
|
||||
min-height: 100vh; |
|
||||
background: #f7f7f7; |
|
||||
} |
|
||||
|
|
||||
.search-wrapper { |
|
||||
display: flex; |
|
||||
height: 64rpx; |
|
||||
} |
|
||||
|
|
||||
// 搜索输入框 |
|
||||
.search-input { |
|
||||
width: 80%; |
|
||||
background: #fff; |
|
||||
border-radius: 10rpx 0 0 10rpx; |
|
||||
box-sizing: border-box; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.search-input-wrapper { |
|
||||
display: flex; |
|
||||
|
|
||||
.left { |
|
||||
display: flex; |
|
||||
width: 60rpx; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
|
|
||||
.search-icon { |
|
||||
display: block; |
|
||||
color: #b4b4b4; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.right { |
|
||||
flex: 1; |
|
||||
|
|
||||
input { |
|
||||
font-size: 28rpx; |
|
||||
height: 64rpx; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.input-placeholder { |
|
||||
color: #aba9a9; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 搜索按钮 |
|
||||
.search-button { |
|
||||
width: 20%; |
|
||||
box-sizing: border-box; |
|
||||
|
|
||||
.button { |
|
||||
height: 64rpx; |
|
||||
font-size: 28rpx; |
|
||||
border-radius: 0 10rpx 10rpx 0; |
|
||||
background: #fa2209; |
|
||||
color: #fff; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
// 最近搜索 |
|
||||
.history { |
|
||||
|
|
||||
.his-head { |
|
||||
font-size: 28rpx; |
|
||||
padding: 50rpx 0 0 0; |
|
||||
color: #777; |
|
||||
|
|
||||
.icon { |
|
||||
float: right; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.his-list { |
|
||||
padding: 20rpx 0; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
.his-item { |
|
||||
width: 33.3%; |
|
||||
float: left; |
|
||||
padding: 10rpx; |
|
||||
box-sizing: border-box; |
|
||||
|
|
||||
.history-button { |
|
||||
text-align: center; |
|
||||
padding: 14rpx; |
|
||||
line-height: 30rpx; |
|
||||
border-radius: 100rpx; |
|
||||
background: #fff; |
|
||||
font-size: 26rpx; |
|
||||
border: 1rpx solid #efefef; |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,127 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" |
|
||||
@up="upCallback"> |
|
||||
<view class="log-list"> |
|
||||
<view v-for="(item, index) in list.data" :key="index" class="log-item"> |
|
||||
<view class="item-left flex-box"> |
|
||||
<view class="rec-status"> |
|
||||
<text>{{ item.describe }}</text> |
|
||||
</view> |
|
||||
<view class="rec-time"> |
|
||||
<text>{{ item.create_time }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item-right"> |
|
||||
<text>{{ item.money > 0 ? '+' : '' }}{{ item.money }}元</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import * as LogApi from '@/api/balance/log' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
|
|
||||
const pageSize = 15 |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 余额账单明细列表 |
|
||||
list: getEmptyPaginateObj(), |
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于12条才显示无更多数据 |
|
||||
noMoreSize: 12, |
|
||||
// 空布局 |
|
||||
empty: { |
|
||||
tip: '亲，暂无账单明细' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) {}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getLogList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
// 获取余额账单明细列表 |
|
||||
getLogList(pageNo = 1) { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
LogApi.list({ page: pageNo }) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = result.data.list |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
page, |
|
||||
.container { |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.log-list { |
|
||||
padding: 0 30rpx; |
|
||||
} |
|
||||
|
|
||||
.log-item { |
|
||||
font-size: 28rpx; |
|
||||
padding: 20rpx 20rpx; |
|
||||
line-height: 1.8; |
|
||||
border-bottom: 1rpx solid rgb(238, 238, 238); |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.rec-status { |
|
||||
color: #333; |
|
||||
|
|
||||
.rec-time { |
|
||||
color: rgb(160, 160, 160); |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,167 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container" v-if="!isLoading"> |
|
||||
<view class="space-upper"> |
|
||||
<view class="wallet-image"> |
|
||||
<image src="/static/wallet.png" mode="widthFix"></image> |
|
||||
</view> |
|
||||
<view class="wallet-account"> |
|
||||
<view class="wallet-account_balance"> |
|
||||
<text>{{ userInfo.balance }}</text> |
|
||||
</view> |
|
||||
<view class="wallet-account_lable"> |
|
||||
<text>账户余额(元)</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="space-lower"> |
|
||||
<view v-if="setting.is_entrance" class="space-lower_item btn-recharge"> |
|
||||
<view class="btn-submit" @click="onTargetRecharge()">充 值</view> |
|
||||
</view> |
|
||||
<view class="space-lower_item item-lable dis-flex flex-x-around"> |
|
||||
<view class="lable-text" @click="onTargetRechargeOrder()"> |
|
||||
<text>充值记录</text> |
|
||||
</view> |
|
||||
<view class="lable-text" @click="onTargetBalanceLog()"> |
|
||||
<text>账单详情</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as UserApi from '@/api/user' |
|
||||
import SettingModel from '@/common/model/Setting' |
|
||||
import SettingKeyEnum from '@/common/enum/setting/Key' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 会员信息 |
|
||||
userInfo: {}, |
|
||||
// 充值设置 |
|
||||
setting: {}, |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onShow(options) { |
|
||||
// 获取页面数据 |
|
||||
this.getPageData() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
// 获取页面数据 |
|
||||
getPageData() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
Promise.all([app.getUserInfo(), app.getSetting()]) |
|
||||
.then(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
// 获取会员信息 |
|
||||
getUserInfo() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
UserApi.info() |
|
||||
.then(result => { |
|
||||
app.userInfo = result.data.userInfo |
|
||||
resolve(app.userInfo) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取充值设置 |
|
||||
getSetting() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
SettingModel.item(SettingKeyEnum.RECHARGE.value, false) |
|
||||
.then(data => { |
|
||||
app.setting = data |
|
||||
resolve(data) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 跳转充值页面 |
|
||||
onTargetRecharge() { |
|
||||
this.$navTo('pages/wallet/recharge/index') |
|
||||
}, |
|
||||
|
|
||||
// 跳转充值记录页面 |
|
||||
onTargetRechargeOrder() { |
|
||||
this.$navTo('pages/wallet/recharge/order') |
|
||||
}, |
|
||||
|
|
||||
// 跳转账单详情页面 |
|
||||
onTargetBalanceLog() { |
|
||||
this.$navTo('pages/wallet/balance/log') |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style> |
|
||||
page { |
|
||||
background: #fff; |
|
||||
} |
|
||||
</style> |
|
||||
<style lang="scss" scoped> |
|
||||
.container { |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.space-upper { |
|
||||
padding: 150rpx 0; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.wallet-image image { |
|
||||
width: 360rpx; |
|
||||
height: 261.72rpx; |
|
||||
} |
|
||||
|
|
||||
.wallet-account { |
|
||||
margin-top: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.wallet-account_balance { |
|
||||
font-size: 56rpx; |
|
||||
} |
|
||||
|
|
||||
.wallet-account_lable { |
|
||||
margin-top: 14rpx; |
|
||||
color: #cec1c1; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
|
|
||||
.space-lower { |
|
||||
margin-top: 30rpx; |
|
||||
padding: 0 110rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-recharge .btn-submit { |
|
||||
width: 460rpx; |
|
||||
height: 84rpx; |
|
||||
margin: 0 auto; |
|
||||
border-radius: 50rpx; |
|
||||
background: #786cff; |
|
||||
color: white; |
|
||||
font-size: 30rpx; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.item-lable { |
|
||||
margin-top: 80rpx; |
|
||||
font-size: 28rpx; |
|
||||
color: rgb(94, 94, 94); |
|
||||
padding: 0 100rpx; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,300 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container" v-if="userInfo.user_id"> |
|
||||
<view class="account-panel dis-flex flex-y-center"> |
|
||||
<view class="panel-lable"> |
|
||||
<text>账户余额</text> |
|
||||
</view> |
|
||||
<view class="panel-balance flex-box"> |
|
||||
<text>￥{{ userInfo.balance }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="recharge-panel"> |
|
||||
<view class="recharge-label"> |
|
||||
<text>充值金额</text> |
|
||||
</view> |
|
||||
<view class="recharge-plan clearfix"> |
|
||||
<block v-for="(item, index) in planList" :key="index"> |
|
||||
<view class="recharge-plan_item" :class="{ active: selectedPlanId == item.plan_id }" @click="onSelectPlan(item.plan_id)"> |
|
||||
<view class="plan_money"> |
|
||||
<text>{{ item.money }}</text> |
|
||||
</view> |
|
||||
<view class="plan_gift" v-if="item.gift_money > 0"> |
|
||||
<text>送{{ item.gift_money }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</block> |
|
||||
</view> |
|
||||
<!-- 手动充值输入框 --> |
|
||||
<view class="recharge-input" v-if="setting.is_custom == 1"> |
|
||||
<input type="digit" placeholder="请输入充值金额" v-model="inputValue" @input="onChangeMoney" /> |
|
||||
</view> |
|
||||
<!-- 确认按钮 --> |
|
||||
<view class="recharge-submit btn-submit"> |
|
||||
<form @submit="onSubmit"> |
|
||||
<button class="button" formType="submit" :disabled="disabled">立即充值</button> |
|
||||
</form> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- 充值描述 --> |
|
||||
<view class="recharge-describe"> |
|
||||
<view class="recharge-label"> |
|
||||
<text>充值说明</text> |
|
||||
</view> |
|
||||
<view class="content"> |
|
||||
<text space="ensp">{{ setting.describe }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import * as UserApi from '@/api/user' |
|
||||
import * as RechargeApi from '@/api/recharge' |
|
||||
import * as PlanApi from '@/api/recharge/plan' |
|
||||
import SettingModel from '@/common/model/Setting' |
|
||||
import SettingKeyEnum from '@/common/enum/setting/Key' |
|
||||
import { wxPayment } from '@/core/app' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
// 正在加载 |
|
||||
isLoading: true, |
|
||||
// 会员信息 |
|
||||
userInfo: {}, |
|
||||
// 充值设置 |
|
||||
setting: {}, |
|
||||
// 充值方案列表 |
|
||||
planList: [], |
|
||||
// 按钮禁用 |
|
||||
disabled: false, |
|
||||
// 当前选中的套餐id |
|
||||
selectedPlanId: 0, |
|
||||
// 自定义金额 |
|
||||
inputValue: '', |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
// 获取页面数据 |
|
||||
this.getPageData() |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 选择充值套餐 |
|
||||
*/ |
|
||||
onSelectPlan(planId) { |
|
||||
this.selectedPlanId = planId |
|
||||
this.inputValue = '' |
|
||||
}, |
|
||||
|
|
||||
// 金额输入框 |
|
||||
onChangeMoney(e) { |
|
||||
this.inputValue = e.target.value |
|
||||
this.selectedPlanId = 0 |
|
||||
}, |
|
||||
|
|
||||
// 获取页面数据 |
|
||||
getPageData() { |
|
||||
const app = this |
|
||||
app.isLoading = true |
|
||||
Promise.all([app.getUserInfo(), app.getSetting(), app.getPlanList()]) |
|
||||
.then(() => app.isLoading = false) |
|
||||
}, |
|
||||
|
|
||||
// 获取充值方案列表 |
|
||||
getPlanList() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
PlanApi.list() |
|
||||
.then(result => { |
|
||||
app.planList = result.data.list |
|
||||
resolve(app.planList) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取会员信息 |
|
||||
getUserInfo() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
UserApi.info() |
|
||||
.then(result => { |
|
||||
app.userInfo = result.data.userInfo |
|
||||
resolve(app.userInfo) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 获取充值设置 |
|
||||
getSetting() { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
SettingModel.item(SettingKeyEnum.RECHARGE.value, false) |
|
||||
.then(data => { |
|
||||
app.setting = data |
|
||||
resolve(data) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 立即充值 |
|
||||
onSubmit(e) { |
|
||||
const app = this |
|
||||
// 按钮禁用 |
|
||||
app.disabled = true |
|
||||
// 提交到后端 |
|
||||
RechargeApi.submit({ planId: app.selectedPlanId, customMoney: app.inputValue }) |
|
||||
.then(result => app.wxPayment(result.data.payment)) |
|
||||
.finally(() => app.disabled = false) |
|
||||
}, |
|
||||
|
|
||||
// 发起微信支付 |
|
||||
wxPayment(option) { |
|
||||
const app = this |
|
||||
wxPayment(option) |
|
||||
.then(() => { |
|
||||
app.$success('支付成功') |
|
||||
setTimeout(() => { |
|
||||
// 获取页面数据 |
|
||||
app.getPageData() |
|
||||
}, 1500) |
|
||||
}) |
|
||||
.catch(err => app.$error('订单未支付')) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
page, |
|
||||
.container { |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.container { |
|
||||
padding-bottom: 70rpx; |
|
||||
} |
|
||||
|
|
||||
/* 账户面板 */ |
|
||||
.account-panel { |
|
||||
width: 650rpx; |
|
||||
height: 180rpx; |
|
||||
margin: 50rpx auto; |
|
||||
padding: 0 60rpx; |
|
||||
box-sizing: border-box; |
|
||||
border-radius: 12rpx; |
|
||||
color: #fff; |
|
||||
background: linear-gradient(-125deg, #a46bff, #786cff); |
|
||||
box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26); |
|
||||
} |
|
||||
|
|
||||
.panel-lable { |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
|
|
||||
.recharge-label { |
|
||||
color: rgb(51, 51, 51); |
|
||||
font-size: 28rpx; |
|
||||
margin-bottom: 25rpx; |
|
||||
} |
|
||||
|
|
||||
.panel-balance { |
|
||||
text-align: right; |
|
||||
font-size: 46rpx; |
|
||||
} |
|
||||
|
|
||||
.recharge-panel { |
|
||||
margin-top: 60rpx; |
|
||||
padding: 0 60rpx; |
|
||||
} |
|
||||
|
|
||||
/* 充值套餐 */ |
|
||||
.recharge-plan { |
|
||||
.recharge-plan_item { |
|
||||
width: 192rpx; |
|
||||
padding: 15rpx 0; |
|
||||
float: left; |
|
||||
text-align: center; |
|
||||
color: #888; |
|
||||
border: 1rpx solid rgb(228, 228, 228); |
|
||||
border-radius: 10rpx; |
|
||||
margin: 0 20rpx 20rpx 0; |
|
||||
|
|
||||
&:nth-child(3n + 0) { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
&.active { |
|
||||
color: #786cff; |
|
||||
border: 1rpx solid #786cff; |
|
||||
|
|
||||
.plan_money { |
|
||||
color: #786cff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.plan_money { |
|
||||
font-size: 32rpx; |
|
||||
color: rgb(82, 82, 82); |
|
||||
} |
|
||||
|
|
||||
.plan_gift { |
|
||||
font-size: 25rpx; |
|
||||
} |
|
||||
|
|
||||
.recharge-input { |
|
||||
margin-top: 25rpx; |
|
||||
|
|
||||
input { |
|
||||
border: 1rpx solid rgb(228, 228, 228); |
|
||||
border-radius: 10rpx; |
|
||||
padding: 15rpx 16rpx; |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 立即充值 */ |
|
||||
.recharge-submit { |
|
||||
margin-top: 70rpx; |
|
||||
} |
|
||||
|
|
||||
.btn-submit { |
|
||||
.button { |
|
||||
font-size: 30rpx; |
|
||||
background: #786cff; |
|
||||
border: none; |
|
||||
color: white; |
|
||||
border-radius: 50rpx; |
|
||||
padding: 0 120rpx; |
|
||||
line-height: 3; |
|
||||
} |
|
||||
|
|
||||
.button[disabled] { |
|
||||
background: #a098ff; |
|
||||
border-color: #a098ff; |
|
||||
color: white; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 充值说明 */ |
|
||||
.recharge-describe { |
|
||||
margin-top: 50rpx; |
|
||||
padding: 0 60rpx; |
|
||||
|
|
||||
.content { |
|
||||
font-size: 26rpx; |
|
||||
line-height: 1.6; |
|
||||
color: #888; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,127 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" |
|
||||
@up="upCallback"> |
|
||||
<view class="log-list"> |
|
||||
<view v-for="(item, index) in list.data" :key="index" class="log-item"> |
|
||||
<view class="item-left flex-box"> |
|
||||
<view class="rec-status"> |
|
||||
<text>{{ '充值成功' }}</text> |
|
||||
</view> |
|
||||
<view class="rec-time"> |
|
||||
<text>{{ item.pay_time }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item-right"> |
|
||||
<text>+{{ item.actual_money }}元</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</mescroll-body> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|
||||
import * as OrderApi from '@/api/recharge/order' |
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app' |
|
||||
|
|
||||
const pageSize = 15 |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
MescrollBody |
|
||||
}, |
|
||||
mixins: [MescrollMixin], |
|
||||
data() { |
|
||||
return { |
|
||||
// 余额账单明细列表 |
|
||||
list: getEmptyPaginateObj(), |
|
||||
// 上拉加载配置 |
|
||||
upOption: { |
|
||||
// 首次自动执行 |
|
||||
auto: true, |
|
||||
// 每页数据的数量; 默认10 |
|
||||
page: { size: pageSize }, |
|
||||
// 数量要大于12条才显示无更多数据 |
|
||||
noMoreSize: 12, |
|
||||
// 空布局 |
|
||||
empty: { |
|
||||
tip: '亲，暂无充值记录' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) {}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|
||||
* @param {Object} page |
|
||||
*/ |
|
||||
upCallback(page) { |
|
||||
const app = this |
|
||||
// 设置列表数据 |
|
||||
app.getLogList(page.num) |
|
||||
.then(list => { |
|
||||
const curPageLen = list.data.length |
|
||||
const totalSize = list.data.total |
|
||||
app.mescroll.endBySize(curPageLen, totalSize) |
|
||||
}) |
|
||||
.catch(() => app.mescroll.endErr()) |
|
||||
}, |
|
||||
|
|
||||
// 获取余额账单明细列表 |
|
||||
getLogList(pageNo = 1) { |
|
||||
const app = this |
|
||||
return new Promise((resolve, reject) => { |
|
||||
OrderApi.list({ page: pageNo }) |
|
||||
.then(result => { |
|
||||
// 合并新数据 |
|
||||
const newList = result.data.list |
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo) |
|
||||
resolve(newList) |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
page, |
|
||||
.container { |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.log-list { |
|
||||
padding: 0 30rpx; |
|
||||
} |
|
||||
|
|
||||
.log-item { |
|
||||
font-size: 28rpx; |
|
||||
padding: 20rpx 20rpx; |
|
||||
line-height: 1.8; |
|
||||
border-bottom: 1rpx solid rgb(238, 238, 238); |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.rec-status { |
|
||||
color: #333; |
|
||||
|
|
||||
.rec-time { |
|
||||
color: rgb(160, 160, 160); |
|
||||
font-size: 26rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue