Merge branch 'master' of http://git.luyuan.tk/luyuan/deming into zmr
This commit is contained in:
zmr900709
commit
699b94e472
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
.vscode
|
||||
node_modules
|
||||
/node_modules/*
|
||||
unpackage
|
||||
12
README.md
12
README.md
@ -42,11 +42,11 @@
|
||||
unescapeHTML(temp){}
|
||||
|
||||
/**
|
||||
* php时间戳转为格式化日期
|
||||
* @param { String } timestamp 必填 php 返回的时间戳
|
||||
* @param { String } spacer 可选 日期间隔符,默认 '-'
|
||||
* @param { String } end 可选 年月日时分秒截止位置，默认 day，可传 second
|
||||
* @return { String } 格式化日期
|
||||
* 上传文件(只能单文件上传)
|
||||
* @param { String } url 服务器 url
|
||||
* @param { String } filePath 要上传文件资源的路径
|
||||
* @param { String } type 上传文件验证类型 默认: img 可选: video
|
||||
* @return { object } promise 对象 resolve 返回文件服务器地址 reject 返回错误信息
|
||||
*/
|
||||
timestampToDate({timestamp, spacer = '-', end = 'day'} = {}) {}
|
||||
uploadFile({ url, filePath, type = 'img' } = {}) {}
|
||||
```
|
||||
@ -103,6 +103,14 @@ export default {
|
||||
cart_id: cart_id,
|
||||
});
|
||||
},
|
||||
// 选择地区计算运费
|
||||
getFreight({ freight_hash, city_id, area_id }) {
|
||||
return vm.$u.post('Buy/change_addr', {
|
||||
freight_hash: freight_hash,
|
||||
city_id: city_id,
|
||||
area_id: area_id,
|
||||
});
|
||||
},
|
||||
// 商品详情
|
||||
getGoodsDetails({ id }) {
|
||||
return vm.$u.post('Goods/goodDetails', {
|
||||
@ -114,6 +122,16 @@ export default {
|
||||
id: id,
|
||||
page:page
|
||||
});
|
||||
},
|
||||
getStoreImgVideoList({id}){
|
||||
return vm.$u.post('Store/getStoreImgVideoList', {
|
||||
id: id
|
||||
});
|
||||
},
|
||||
goodsInfo({id}){
|
||||
return vm.$u.post('goods/goodsInfo', {
|
||||
goods_id: id
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,7 +195,7 @@ export default {
|
||||
},
|
||||
// 修改绑定手机号
|
||||
changeMemberPhone({ old_mobile, old_code, new_mobile, new_code }) {
|
||||
return vm.$u.post('Member/changeMemberInfo', {
|
||||
return vm.$u.post('Member/memberChangeMobile', {
|
||||
old_mobile: old_mobile,
|
||||
old_code: old_code,
|
||||
new_mobile: new_mobile,
|
||||
@ -211,16 +211,57 @@ export default {
|
||||
return vm.$u.post('Setting/CertificateInfo');
|
||||
},
|
||||
// 用户浏览记录
|
||||
getBrowseList() {
|
||||
return vm.$u.post('Member/BrowseList');
|
||||
getBrowseList({ page }) {
|
||||
return vm.$u.post('Member/BrowseList', {
|
||||
page: page,
|
||||
});
|
||||
},
|
||||
// 意见反馈列表
|
||||
getFeedbackList({ page }) {
|
||||
return vm.$u.post('Member/feedbackList', {
|
||||
page: page,
|
||||
});
|
||||
},
|
||||
// 意见反馈-写意见
|
||||
writeFeedback({ fb_content, fb_images }) {
|
||||
return vm.$u.post('Member/writeFeedback', {
|
||||
fb_content: fb_content,
|
||||
fb_images: fb_images,
|
||||
});
|
||||
},
|
||||
// 订单列表
|
||||
getOrderList({ page }) {
|
||||
return vm.$u.post('Goods/orderList', { page });
|
||||
getOrderList({ page, type }) {
|
||||
let params = { page: page };
|
||||
if(type >= 0) Object.assign(params, {state_type: type})
|
||||
return vm.$u.post('Goods/orderList', params);
|
||||
},
|
||||
// 订单详情
|
||||
getOrderInfo({ order_id }) {
|
||||
return vm.$u.post('Goods/orderInfo', { order_id });
|
||||
return vm.$u.post('Goods/orderInfo', { order_id: order_id });
|
||||
},
|
||||
// 查询订单的评价信息
|
||||
getOrderEvaluateInfo({ id }) {
|
||||
return vm.$u.post('Order/getOrderEvaluateInfo', { id: id });
|
||||
},
|
||||
// 订单评价/修改评价
|
||||
updateOrderEvaluate({ id, content, scores_one, scores_two, scores_three, file }) {
|
||||
return vm.$u.post('Order/orderEvaluate', {
|
||||
id: id,
|
||||
content: content,
|
||||
scores_one: scores_one,
|
||||
scores_two: scores_two,
|
||||
scores_three: scores_three,
|
||||
file: file,
|
||||
});
|
||||
},
|
||||
// 上传图片视频
|
||||
uploadfile({ file }) {
|
||||
const params = {
|
||||
file: file
|
||||
}
|
||||
console.log(params);
|
||||
|
||||
return vm.$u.post('Upload/uploadfile', params);
|
||||
},
|
||||
// 信息模块
|
||||
messageIndex({ }) {
|
||||
|
||||
@ -118,16 +118,19 @@ export default {
|
||||
// latitude,
|
||||
}).then((res)=>{
|
||||
if (res.errCode == 0) {
|
||||
this.$refs.uToast.show({
|
||||
title: res.message,
|
||||
type: 'success',
|
||||
// url: '/pageE/more/Address',
|
||||
callback() {
|
||||
uni.redirectTo({
|
||||
url: '/pageE/more/Address'
|
||||
});
|
||||
}
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: '/pageE/more/Address'
|
||||
});
|
||||
// this.$refs.uToast.show({
|
||||
// title: res.message,
|
||||
// type: 'success',
|
||||
// // url: '/pageE/more/Address',
|
||||
// callback() {
|
||||
// uni.redirectTo({
|
||||
// url: '/pageE/more/Address'
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
} else {
|
||||
this.showToast(res.message, 'warning');
|
||||
}
|
||||
@ -148,16 +151,19 @@ export default {
|
||||
// latitude,
|
||||
}).then((res)=>{
|
||||
if (res.errCode == 0) {
|
||||
this.$refs.uToast.show({
|
||||
title: res.message,
|
||||
type: 'success',
|
||||
// url: '/pageE/more/Address',
|
||||
callback() {
|
||||
uni.redirectTo({
|
||||
url: '/pageE/more/Address'
|
||||
});
|
||||
}
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: '/pageE/more/Address'
|
||||
});
|
||||
// this.$refs.uToast.show({
|
||||
// title: res.message,
|
||||
// type: 'success',
|
||||
// // url: '/pageE/more/Address',
|
||||
// callback() {
|
||||
// uni.redirectTo({
|
||||
// url: '/pageE/more/Address'
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
} else {
|
||||
this.showToast(res.message, 'warning');
|
||||
}
|
||||
|
||||
131
components/mine/coupon/index.vue
Normal file
131
components/mine/coupon/index.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view class="c-coupon">
|
||||
<view :class="status == 0 ? 'coupon-usable' : 'coupon-unable'">
|
||||
<view class="info-type" :style="{ backgroundImage: 'url(' + (status == 0 ? '/static/image/mine/30.png' : '/static/image/mine/31.png') + ')', backgroundSize:'contain', backgroundRepeat: 'no-repeat' }">
|
||||
<div class="wrap_left_top"></div>
|
||||
{{ couponInfo.index&1 ? '店铺优惠券' : '平台优惠券' }}
|
||||
</view>
|
||||
<view class="coupon-info">
|
||||
<view class="info-usable">
|
||||
<view class="price">￥<span>10</span></view>
|
||||
<view class="condition">满100使用</view>
|
||||
</view>
|
||||
<view class="info-store u-line-1">仅限 nike官方旗舰店 鞋子商品使用</view>
|
||||
<view class="info-integral">兑换积分：200积分</view>
|
||||
<view class="info-date">有效期2018.09.06-2018.10.06</view>
|
||||
</view>
|
||||
<view class="coupon-btn">
|
||||
<text v-if="type == 0 && status == 0" @click="exchange">立即兑换</text>
|
||||
<text v-if="type == 1 && status == 0" @click="use">立即使用</text>
|
||||
<image v-if="status == 1" src="/static/image/mine/28.png"></image>
|
||||
<image v-if="status == 2" src="/static/image/mine/29.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* coupon 优惠券
|
||||
* @description 优惠券组件
|
||||
* @property {Number} type 优惠券操作方式(兑换优惠券: 0 / 使用优惠券: 1)
|
||||
* @property {Object} coupon-info 优惠券信息
|
||||
* @event {Function} exchange 兑换优惠券
|
||||
* @event {Function} use 使用优惠券
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
status: Number,
|
||||
type: Number,
|
||||
couponInfo: Object,
|
||||
},
|
||||
methods: {
|
||||
exchange() {
|
||||
this.$emit('exchange', this.couponInfo.index);
|
||||
},
|
||||
use() {
|
||||
this.$emit('use', this.couponInfo.index);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-coupon {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
@mixin coupon-image($url) {
|
||||
width: 690rpx;
|
||||
height: 194rpx;
|
||||
background: url($url) no-repeat left top / contain;
|
||||
color: #FFFFFF;
|
||||
.info-type {
|
||||
width: 150rpx;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
font-size: 20rpx;
|
||||
border-radius: 10rpx 0rpx 10rpx 0rpx;
|
||||
padding-left: 25rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.coupon-info {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 36rpx;
|
||||
left: 0;
|
||||
font-weight: 500;
|
||||
padding-left: 20rpx;
|
||||
width: 360rpx;
|
||||
.info-usable{
|
||||
margin-bottom: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.price {
|
||||
margin-right: 16rpx;
|
||||
font-size: 40rpx;
|
||||
> span {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.info-store{
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.info-integral{
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.info-date{
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.coupon-btn {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
right: 60rpx;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
> text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
> image {
|
||||
width: 122rpx;
|
||||
height: 122rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-usable {
|
||||
@include coupon-image('/static/image/mine/26.png');
|
||||
}
|
||||
.coupon-unable {
|
||||
@include coupon-image('/static/image/mine/27.png');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,30 +2,32 @@
|
||||
<view class="order-item">
|
||||
<view class="order-title">
|
||||
<view class="store-info">
|
||||
<image src="@/pageE/static/mine/23.png"></image>
|
||||
<view class="store-name">胖胖的店</view>
|
||||
<image :src="order.extend_store.store_avatar"></image>
|
||||
<view class="store-name">{{ order.extend_store.store_name }}</view>
|
||||
</view>
|
||||
<view class="order-status">交易成功</view>
|
||||
<view class="order-status">{{ order.order_state | viewState }}</view>
|
||||
</view>
|
||||
<view class="goods-info" @click="toDetailsPage">
|
||||
<image src="@/pageE/static/mine/23.png"></image>
|
||||
<view class="goods-text">
|
||||
<view class="goods-name u-line-2">木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子</view>
|
||||
<view class="goods-sku u-line-1" v-if="current !== 5 && current !== 6">XL;红色条纹XL;红色条纹XL;红色条纹</view>
|
||||
<view class="goods-time u-line-1" v-if="current == 1 || current == 4">距离结束：23:23:38</view>
|
||||
<view class="goods-price u-line-1" v-if="current == 5 || current == 6">总价：￥99.00，实付款￥99</view>
|
||||
<view class="goods-date" v-if="current == 5 || current == 6">
|
||||
<image src="@/pageE/static/mine/26.png"></image>
|
||||
<view>2020.05.17</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-item" @click="toDetailsPage" v-for="goods in order.extend_order_goods" :key="goods.goods_id">
|
||||
<image :src="goods.goods_image"></image>
|
||||
<view class="goods-text">
|
||||
<view class="goods-name u-line-2">{{ goods.goods_name }}</view>
|
||||
<view class="goods-sku u-line-1" v-if="order.order_state !== 20 && order.order_state !== 40">XL;红色条纹XL;红色条纹XL;红色条纹</view>
|
||||
<view class="goods-time u-line-1" v-if="order.order_state == 10 || order.order_state == 10">距离结束：23:23:38</view>
|
||||
<view class="goods-price u-line-1" v-if="order.order_state == 20 || order.order_state == 40">总价：￥99.00，实付款￥99</view>
|
||||
<view class="goods-date" v-if="order.order_state == 20 || order.order_state == 40">
|
||||
<image src="@/pageE/static/mine/26.png"></image>
|
||||
<view>2020.05.17</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-btn" v-if="[0, 2, 4].indexOf(current) < 0">
|
||||
<view class="logistics" v-if="current == 3" @click="toLogistics">查看物流</view>
|
||||
<view class="comment" v-if="current == 5" @click="toComment">立即评价</view>
|
||||
<view class="payment" v-if="current == 1">立即支付</view>
|
||||
<view class="service" v-if="current == 6">联系官方客服</view>
|
||||
<view class="submit" v-if="current == 6">提交官方审核</view>
|
||||
<view class="order-btn" v-if="[10, 30, 20, 40].indexOf(order.order_state) >= 0">
|
||||
<view class="logistics" v-if="order.order_state == 30" @click="toLogistics">查看物流</view>
|
||||
<view class="comment" v-if="order.order_state == 20" @click="toComment">立即评价</view>
|
||||
<view class="payment" v-if="order.order_state == 10">立即支付</view>
|
||||
<view class="service" v-if="order.order_state == 40">联系官方客服</view>
|
||||
<view class="submit" v-if="order.order_state == 40">提交官方审核</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -35,12 +37,40 @@ export default {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
current: Number
|
||||
order: Object
|
||||
},
|
||||
filters: {
|
||||
viewState(value) {
|
||||
let state;
|
||||
switch (value) {
|
||||
case 10:
|
||||
state = '待支付';
|
||||
break;
|
||||
case 0:
|
||||
state = '已取消';
|
||||
break;
|
||||
case 30:
|
||||
state = '待收货';
|
||||
break;
|
||||
case -1:
|
||||
state = '试穿试送';
|
||||
break;
|
||||
case 20:
|
||||
state = '待评价';
|
||||
break;
|
||||
case 40:
|
||||
state = '售后';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return state;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toDetailsPage() {
|
||||
uni.navigateTo({
|
||||
url: '/pageE/order/Details?current=' + this.current
|
||||
url: '/pageE/order/Details?order.order_state=' + this.order.order_state
|
||||
});
|
||||
},
|
||||
toLogistics() {
|
||||
@ -87,49 +117,51 @@ export default {
|
||||
}
|
||||
}
|
||||
.goods-info {
|
||||
display: flex;
|
||||
margin-bottom: 28rpx;
|
||||
> image {
|
||||
flex-shrink: 0;
|
||||
width: 180rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.goods-text {
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
line-height: 38rpx;
|
||||
margin-bottom: 28rpx;
|
||||
> image {
|
||||
flex-shrink: 0;
|
||||
width: 180rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.goods-sku {
|
||||
max-width: 230rpx;
|
||||
background: rgba(236,236,236,1);
|
||||
border-radius: 6rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
}
|
||||
.goods-time {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255,49,49,1);
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 24rpx;
|
||||
color: rgba(253,211,96,1);
|
||||
}
|
||||
.goods-date {
|
||||
.goods-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
> image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 21rpx;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
line-height: 38rpx;
|
||||
}
|
||||
.goods-sku {
|
||||
max-width: 230rpx;
|
||||
background: rgba(236,236,236,1);
|
||||
border-radius: 6rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
}
|
||||
.goods-time {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255,49,49,1);
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 24rpx;
|
||||
color: rgba(253,211,96,1);
|
||||
}
|
||||
.goods-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
> image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,245 +0,0 @@
|
||||
const BindingX = uni.requireNativePlugin('bindingx');
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
right: 0,
|
||||
button: [],
|
||||
preventGesture: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (!this.position || JSON.stringify(this.position) === '{}') return;
|
||||
if (this.autoClose) return
|
||||
if (this.isInAnimation) return
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.swipeaction.children !== undefined) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.boxSelector = this.getEl(this.$refs['selector-box-hock']);
|
||||
this.selector = this.getEl(this.$refs['selector-content-hock']);
|
||||
this.buttonSelector = this.getEl(this.$refs['selector-button-hock']);
|
||||
this.position = {}
|
||||
this.x = 0
|
||||
setTimeout(() => {
|
||||
this.getSelectorQuery()
|
||||
}, 200)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timing) {
|
||||
BindingX.unbind({
|
||||
token: this.timing.token,
|
||||
eventType: 'timing'
|
||||
})
|
||||
}
|
||||
if (this.eventpan) {
|
||||
BindingX.unbind({
|
||||
token: this.eventpan.token,
|
||||
eventType: 'pan'
|
||||
})
|
||||
}
|
||||
this.swipeaction.children.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.swipeaction.children.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onClick(index, item) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index
|
||||
})
|
||||
},
|
||||
touchstart(e) {
|
||||
if (this.isInAnimation) return
|
||||
if (this.stop) return
|
||||
this.stop = true
|
||||
if (this.autoClose) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
let endWidth = this.right
|
||||
let boxStep = `(x+${this.x})`
|
||||
let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)`
|
||||
|
||||
let props = [{
|
||||
element: this.selector,
|
||||
property: 'transform.translateX',
|
||||
expression: pageX
|
||||
}]
|
||||
|
||||
let left = 0
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
|
||||
if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
|
||||
let moveMix = endWidth - left
|
||||
left += this.button[i].width
|
||||
let step = `(${this.x}+x)/${endWidth}`
|
||||
let moveX = `(${step}) * ${moveMix}`
|
||||
let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}`
|
||||
props.push({
|
||||
element: buttonSelectors,
|
||||
property: 'transform.translateX',
|
||||
expression: pageButtonX
|
||||
})
|
||||
}
|
||||
|
||||
this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => {
|
||||
if (e.state === 'end') {
|
||||
this.x = e.deltaX + this.x;
|
||||
if (this.x < -endWidth) {
|
||||
this.x = -endWidth
|
||||
}
|
||||
if (this.x > 0) {
|
||||
this.x = 0
|
||||
}
|
||||
this.stop = false
|
||||
this.bindTiming();
|
||||
}
|
||||
})
|
||||
},
|
||||
touchend(e) {
|
||||
this.$nextTick(() => {
|
||||
if (this.isopen && !this.isDrag && !this.isInAnimation) {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
},
|
||||
bindTiming() {
|
||||
if (this.isopen) {
|
||||
this.move(this.x, -this.right)
|
||||
} else {
|
||||
this.move(this.x, -40)
|
||||
}
|
||||
},
|
||||
move(left, value) {
|
||||
if (left >= value) {
|
||||
this.close()
|
||||
} else {
|
||||
this.open()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 开启swipe
|
||||
*/
|
||||
open() {
|
||||
this.animation(true)
|
||||
},
|
||||
/**
|
||||
* 关闭swipe
|
||||
*/
|
||||
close() {
|
||||
this.animation(false)
|
||||
},
|
||||
/**
|
||||
* 开启关闭动画
|
||||
* @param {Object} type
|
||||
*/
|
||||
animation(type) {
|
||||
this.isDrag = true
|
||||
let endWidth = this.right
|
||||
let time = 200
|
||||
this.isInAnimation = true;
|
||||
|
||||
let exit = `t>${time}`;
|
||||
let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})`
|
||||
let props = [{
|
||||
element: this.selector,
|
||||
property: 'transform.translateX',
|
||||
expression: translate_x_expression
|
||||
}]
|
||||
|
||||
let left = 0
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
|
||||
if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
|
||||
let moveMix = endWidth - left
|
||||
left += this.button[i].width
|
||||
let step = `${this.x}/${endWidth}`
|
||||
let moveX = `(${step}) * ${moveMix}`
|
||||
let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})`
|
||||
props.push({
|
||||
element: buttonSelectors,
|
||||
property: 'transform.translateX',
|
||||
expression: pageButtonX
|
||||
})
|
||||
}
|
||||
|
||||
this.timing = BindingX.bind({
|
||||
eventType: 'timing',
|
||||
exitExpression: exit,
|
||||
props: props
|
||||
}, (e) => {
|
||||
if (e.state === 'end' || e.state === 'exit') {
|
||||
this.x = type ? -endWidth : 0
|
||||
this.isInAnimation = false;
|
||||
|
||||
this.isopen = this.isopen || false
|
||||
if (this.isopen !== type) {
|
||||
this.$emit('change', type)
|
||||
}
|
||||
this.isopen = type
|
||||
this.isDrag = false
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 绑定 BindingX
|
||||
* @param {Object} anchor
|
||||
* @param {Object} props
|
||||
* @param {Object} fn
|
||||
*/
|
||||
_bind(anchor, props, eventType, fn) {
|
||||
return BindingX.bind({
|
||||
anchor,
|
||||
eventType,
|
||||
props
|
||||
}, (e) => {
|
||||
typeof(fn) === 'function' && fn(e)
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取ref
|
||||
* @param {Object} el
|
||||
*/
|
||||
getEl(el) {
|
||||
return el.ref
|
||||
},
|
||||
/**
|
||||
* 获取节点信息
|
||||
*/
|
||||
getSelectorQuery() {
|
||||
dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
|
||||
if (this.position.content) return
|
||||
this.position.content = data.size
|
||||
})
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
dom.getComponentRect(this.$refs['button-hock'][i], (data) => {
|
||||
if (!this.button) {
|
||||
this.button = []
|
||||
}
|
||||
if (this.options.length === this.button.length) return
|
||||
this.button.push(data.size)
|
||||
this.right += data.size.width
|
||||
if (this.autoClose) return
|
||||
if (this.show) {
|
||||
this.open()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,204 +0,0 @@
|
||||
/**
|
||||
* 监听页面内值的变化,主要用于动态开关swipe-action
|
||||
* @param {Object} newValue
|
||||
* @param {Object} oldValue
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} instance
|
||||
*/
|
||||
function sizeReady(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = instance.getState()
|
||||
state.position = JSON.parse(newValue)
|
||||
if (!state.position || state.position.length === 0) return
|
||||
var show = state.position[0].show
|
||||
state.left = state.left || state.position[0].left;
|
||||
// 通过用户变量,开启或关闭
|
||||
if (show) {
|
||||
openState(true, instance, ownerInstance)
|
||||
} else {
|
||||
openState(false, instance, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function touchstart(e, ins) {
|
||||
var instance = e.instance;
|
||||
var state = instance.getState();
|
||||
var pageX = e.touches[0].pageX;
|
||||
// 开始触摸时移除动画类
|
||||
instance.removeClass('ani');
|
||||
var owner = ins.selectAllComponents('.button-hock')
|
||||
for (var i = 0; i < owner.length; i++) {
|
||||
owner[i].removeClass('ani');
|
||||
}
|
||||
// state.position = JSON.parse(instance.getDataset().position);
|
||||
state.left = state.left || state.position[0].left;
|
||||
// 获取最终按钮组的宽度
|
||||
state.width = pageX - state.left;
|
||||
ins.callMethod('closeSwipe')
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始滑动操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchmove(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
|
||||
if (disabled) return
|
||||
var pageX = e.touches[0].pageX;
|
||||
move(pageX - state.width, instance, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束触摸操作
|
||||
* @param {Object} e
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function touchend(e, ownerInstance) {
|
||||
var instance = e.instance;
|
||||
var disabled = instance.getDataset().disabled
|
||||
var state = instance.getState()
|
||||
|
||||
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||
disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
|
||||
|
||||
if (disabled) return
|
||||
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||
moveDirection(state.left, -40, instance, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function move(value, instance, ownerInstance) {
|
||||
var state = instance.getState()
|
||||
// 获取可滑动范围
|
||||
var x = Math.max(-state.position[1].width, Math.min((value), 0));
|
||||
state.left = x;
|
||||
instance.setStyle({
|
||||
transform: 'translateX(' + x + 'px)',
|
||||
'-webkit-transform': 'translateX(' + x + 'px)'
|
||||
})
|
||||
// 折叠按钮动画
|
||||
buttonFold(x, instance, ownerInstance)
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动方向判断
|
||||
* @param {Object} left
|
||||
* @param {Object} value
|
||||
* @param {Object} ownerInstance
|
||||
* @param {Object} ins
|
||||
*/
|
||||
function moveDirection(left, value, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var position = state.position
|
||||
var isopen = state.isopen
|
||||
if (!position[1].width) {
|
||||
openState(false, ins, ownerInstance)
|
||||
return
|
||||
}
|
||||
// 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
|
||||
if (isopen) {
|
||||
if (-left <= position[1].width) {
|
||||
openState(false, ins, ownerInstance)
|
||||
} else {
|
||||
openState(true, ins, ownerInstance)
|
||||
}
|
||||
return
|
||||
}
|
||||
// 如果是关闭状态,进行判断是否打开,还是保留关闭状态
|
||||
if (left <= value) {
|
||||
openState(true, ins, ownerInstance)
|
||||
} else {
|
||||
openState(false, ins, ownerInstance)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置按钮移动距离
|
||||
* @param {Object} value
|
||||
* @param {Object} instance
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function buttonFold(value, instance, ownerInstance) {
|
||||
var ins = ownerInstance.selectAllComponents('.button-hock');
|
||||
var state = instance.getState();
|
||||
var position = state.position;
|
||||
var arr = [];
|
||||
var w = 0;
|
||||
for (var i = 0; i < ins.length; i++) {
|
||||
if (!ins[i].getDataset().button) return
|
||||
var btnData = JSON.parse(ins[i].getDataset().button)
|
||||
|
||||
// fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容
|
||||
if (typeof(btnData) === 'string') {
|
||||
btnData = JSON.parse(btnData)
|
||||
}
|
||||
|
||||
var button = btnData[i] && btnData[i].width || 0
|
||||
w += button
|
||||
arr.push(-w)
|
||||
// 动态计算按钮组每个按钮的折叠动画移动距离
|
||||
var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
|
||||
if (i != 0) {
|
||||
ins[i].setStyle({
|
||||
transform: 'translateX(' + distance + 'px)',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开启状态
|
||||
* @param {Boolean} type
|
||||
* @param {Object} ins
|
||||
* @param {Object} ownerInstance
|
||||
*/
|
||||
function openState(type, ins, ownerInstance) {
|
||||
var state = ins.getState()
|
||||
var position = state.position
|
||||
if (state.isopen === undefined) {
|
||||
state.isopen = false
|
||||
}
|
||||
// 只有状态有改变才会通知页面改变状态
|
||||
if (state.isopen !== type) {
|
||||
// 通知页面,已经打开
|
||||
ownerInstance.callMethod('change', {
|
||||
open: type
|
||||
})
|
||||
}
|
||||
// 设置打开和移动状态
|
||||
state.isopen = type
|
||||
|
||||
|
||||
// 添加动画类
|
||||
ins.addClass('ani');
|
||||
var owner = ownerInstance.selectAllComponents('.button-hock')
|
||||
for (var i = 0; i < owner.length; i++) {
|
||||
owner[i].addClass('ani');
|
||||
}
|
||||
// 设置最终移动位置
|
||||
move(type ? -position[1].width : 0, ins, ownerInstance)
|
||||
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
sizeReady: sizeReady,
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend
|
||||
}
|
||||
@ -1,160 +0,0 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isshow: false,
|
||||
viewWidth: 0,
|
||||
buttonWidth: 0,
|
||||
disabledView: false,
|
||||
x: 0,
|
||||
transition: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (this.autoClose) return
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.swipeaction.children !== undefined) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.swipeaction.children.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.swipeaction.children.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
this.isopen = false
|
||||
this.transition = true
|
||||
setTimeout(() => {
|
||||
this.getQuerySelect()
|
||||
}, 50)
|
||||
|
||||
},
|
||||
methods: {
|
||||
onClick(index, item) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index
|
||||
})
|
||||
},
|
||||
touchstart(e) {
|
||||
let {
|
||||
pageX,
|
||||
pageY
|
||||
} = e.changedTouches[0]
|
||||
this.transition = false
|
||||
this.startX = pageX
|
||||
if (this.autoClose) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
},
|
||||
touchmove(e) {
|
||||
let {
|
||||
pageX,
|
||||
} = e.changedTouches[0]
|
||||
this.slide = this.getSlide(pageX)
|
||||
if (this.slide === 0) {
|
||||
this.disabledView = false
|
||||
}
|
||||
|
||||
},
|
||||
touchend(e) {
|
||||
this.stop = false
|
||||
this.transition = true
|
||||
if (this.isopen) {
|
||||
if (this.moveX === -this.buttonWidth) {
|
||||
this.close()
|
||||
return
|
||||
}
|
||||
this.move()
|
||||
} else {
|
||||
if (this.moveX === 0) {
|
||||
this.close()
|
||||
return
|
||||
}
|
||||
this.move()
|
||||
}
|
||||
},
|
||||
open() {
|
||||
this.x = this.moveX
|
||||
this.$nextTick(() => {
|
||||
this.x = -this.buttonWidth
|
||||
this.moveX = this.x
|
||||
|
||||
if(!this.isopen){
|
||||
this.isopen = true
|
||||
this.$emit('change', true)
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.x = this.moveX
|
||||
this.$nextTick(() => {
|
||||
this.x = 0
|
||||
this.moveX = this.x
|
||||
if(this.isopen){
|
||||
this.isopen = false
|
||||
this.$emit('change', false)
|
||||
}
|
||||
})
|
||||
},
|
||||
move() {
|
||||
if (this.slide === 0) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
onChange(e) {
|
||||
let x = e.detail.x
|
||||
this.moveX = x
|
||||
if (x >= this.buttonWidth) {
|
||||
this.disabledView = true
|
||||
this.$nextTick(() => {
|
||||
this.x = this.buttonWidth
|
||||
})
|
||||
}
|
||||
},
|
||||
getSlide(x) {
|
||||
if (x >= this.startX) {
|
||||
this.startX = x
|
||||
return 1
|
||||
} else {
|
||||
this.startX = x
|
||||
return 0
|
||||
}
|
||||
|
||||
},
|
||||
getQuerySelect() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll('.viewWidth-hook').boundingClientRect(data => {
|
||||
|
||||
this.viewWidth = data[0].width
|
||||
this.buttonWidth = data[1].width
|
||||
this.transition = false
|
||||
this.$nextTick(() => {
|
||||
this.transition = true
|
||||
})
|
||||
|
||||
if (!this.buttonWidth) {
|
||||
this.disabledView = true
|
||||
}
|
||||
|
||||
if (this.autoClose) return
|
||||
if (this.show) {
|
||||
this.open()
|
||||
}
|
||||
}).exec();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,158 +0,0 @@
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom');
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uniShow: false,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
moveLeft() {
|
||||
return `translateX(${this.left}px)`
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (!this.position || JSON.stringify(this.position) === '{}') return;
|
||||
if (this.autoClose) return
|
||||
if (newVal) {
|
||||
this.$emit('change', true)
|
||||
this.open()
|
||||
} else {
|
||||
this.$emit('change', false)
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.position = {}
|
||||
if (this.swipeaction.children !== undefined) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.getSelectorQuery()
|
||||
}, 100)
|
||||
},
|
||||
beforeDestoy() {
|
||||
this.swipeaction.children.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.swipeaction.children.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onClick(index, item) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
},
|
||||
touchstart(e) {
|
||||
const {
|
||||
pageX
|
||||
} = e.touches[0]
|
||||
if (this.disabled) return
|
||||
const left = this.position.content.left
|
||||
if (this.autoClose) {
|
||||
this.swipeaction.closeOther(this)
|
||||
}
|
||||
this.width = pageX - left
|
||||
if (this.isopen) return
|
||||
if (this.uniShow) {
|
||||
this.uniShow = false
|
||||
this.isopen = true
|
||||
this.openleft = this.left + this.position.button.width
|
||||
}
|
||||
},
|
||||
touchmove(e, index) {
|
||||
if (this.disabled) return
|
||||
const {
|
||||
pageX
|
||||
} = e.touches[0]
|
||||
this.setPosition(pageX)
|
||||
},
|
||||
touchend() {
|
||||
if (this.disabled) return
|
||||
if (this.isopen) {
|
||||
this.move(this.openleft, 0)
|
||||
return
|
||||
}
|
||||
this.move(this.left, -40)
|
||||
},
|
||||
setPosition(x, y) {
|
||||
if (!this.position.button.width) {
|
||||
return
|
||||
}
|
||||
// this.left = x - this.width
|
||||
this.setValue(x - this.width)
|
||||
},
|
||||
setValue(value) {
|
||||
// 设置最大最小值
|
||||
this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
|
||||
this.position.content.left = this.left
|
||||
if (this.isopen) {
|
||||
this.openleft = this.left + this.position.button.width
|
||||
}
|
||||
},
|
||||
move(left, value) {
|
||||
if (left >= value) {
|
||||
this.$emit('change', false)
|
||||
this.close()
|
||||
} else {
|
||||
this.$emit('change', true)
|
||||
this.open()
|
||||
}
|
||||
},
|
||||
open() {
|
||||
this.uniShow = true
|
||||
this.left = -this.position.button.width
|
||||
this.setValue(-this.position.button.width)
|
||||
},
|
||||
close() {
|
||||
this.uniShow = true
|
||||
this.setValue(0)
|
||||
setTimeout(() => {
|
||||
this.uniShow = false
|
||||
this.isopen = false
|
||||
}, 300)
|
||||
},
|
||||
getSelectorQuery() {
|
||||
// #ifndef APP-NVUE
|
||||
const views = uni.createSelectorQuery()
|
||||
.in(this)
|
||||
views
|
||||
.selectAll('.selector-query-hock')
|
||||
.boundingClientRect(data => {
|
||||
this.position.content = data[1]
|
||||
this.position.button = data[0]
|
||||
if (this.autoClose) return
|
||||
if (this.show) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
|
||||
if (this.position.content) return
|
||||
this.position.content = data.size
|
||||
})
|
||||
dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
|
||||
if (this.position.button) return
|
||||
this.position.button = data.size
|
||||
if (this.autoClose) return
|
||||
if (this.show) {
|
||||
this.open()
|
||||
} else {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
position: [],
|
||||
button: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pos() {
|
||||
return JSON.stringify(this.position)
|
||||
},
|
||||
btn() {
|
||||
return JSON.stringify(this.button)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (this.autoClose) return
|
||||
let valueObj = this.position[0]
|
||||
if (!valueObj) {
|
||||
this.init()
|
||||
return
|
||||
}
|
||||
valueObj.show = newVal
|
||||
this.$set(this.position, 0, valueObj)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.swipeaction.children !== undefined) {
|
||||
this.swipeaction.children.push(this)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.swipeaction.children.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.swipeaction.children.splice(index, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
setTimeout(() => {
|
||||
this.getSize()
|
||||
this.getButtonSize()
|
||||
}, 50)
|
||||
},
|
||||
closeSwipe(e) {
|
||||
if (!this.autoClose) return
|
||||
this.swipeaction.closeOther(this)
|
||||
},
|
||||
|
||||
change(e) {
|
||||
this.$emit('change', e.open)
|
||||
let valueObj = this.position[0]
|
||||
if (valueObj.show !== e.open) {
|
||||
valueObj.show = e.open
|
||||
this.$set(this.position, 0, valueObj)
|
||||
}
|
||||
},
|
||||
onClick(index, item) {
|
||||
this.$emit('click', {
|
||||
content: item,
|
||||
index
|
||||
})
|
||||
},
|
||||
appTouchStart(){},
|
||||
appTouchEnd(){},
|
||||
getSize() {
|
||||
const views = uni.createSelectorQuery().in(this)
|
||||
views
|
||||
.selectAll('.selector-query-hock')
|
||||
.boundingClientRect(data => {
|
||||
if (this.autoClose) {
|
||||
data[0].show = false
|
||||
} else {
|
||||
data[0].show = this.show
|
||||
}
|
||||
this.position = data
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
getButtonSize() {
|
||||
const views = uni.createSelectorQuery().in(this)
|
||||
views
|
||||
.selectAll('.button-hock')
|
||||
.boundingClientRect(data => {
|
||||
this.button = data
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,270 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-swipe">
|
||||
<!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
|
||||
<view class="uni-swipe_content">
|
||||
<view :data-disabled="disabled" :data-position="pos" :change:prop="swipe.sizeReady" :prop="pos" class="uni-swipe_move-box selector-query-hock move-hock"
|
||||
@touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend" @change="change">
|
||||
<view class="uni-swipe_box">
|
||||
<slot />
|
||||
</view>
|
||||
<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
|
||||
<!-- 使用 touchend 解决 ios 13 不触发按钮事件的问题-->
|
||||
<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
}"
|
||||
class="uni-swipe_button button-hock" @touchend="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- app nvue端 使用 bindingx -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view ref="selector-box-hock" class="uni-swipe_content" @horizontalpan="touchstart" @touchend="touchend">
|
||||
<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock" :style="{width:right+'px'}">
|
||||
<view ref="button-hock" v-for="(item,index) in options" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',left: right+'px'}"
|
||||
class="uni-swipe_button " @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text></view>
|
||||
</view>
|
||||
<view ref='selector-content-hock' class="uni-swipe_move-box selector-query-hock">
|
||||
<view class="uni-swipe_box">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 在非 app 端、非微信小程序、支付宝小程序、h5端使用 js -->
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY || H5 -->
|
||||
<view class="uni-swipe_content">
|
||||
<view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
|
||||
<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
}"
|
||||
class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
|
||||
</view>
|
||||
<view ref='selector-content-hock' class="selector-query-hock" @touchstart="touchstart" @touchmove="touchmove"
|
||||
@touchend="touchend" :class="{'ani':uniShow}" :style="{transform:moveLeft}">
|
||||
<view class="uni-swipe_move-box" >
|
||||
<view class="uni-swipe_box">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="uni-swipe-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
|
||||
<view class="viewWidth-hook">
|
||||
<movable-area v-if="viewWidth !== 0" class="movable-area" :style="{width:(viewWidth-buttonWidth)+'px'}">
|
||||
<movable-view class="movable-view" direction="horizontal" :animation="!transition" :style="{width:viewWidth+'px'}"
|
||||
:class="[transition?'transition':'']" :x="x" :disabled="disabledView" @change="onChange">
|
||||
<view class="movable-view-box">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
<view ref="selector-button-hock" class="uni-swipe_button-group viewWidth-hook">
|
||||
<view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
|
||||
backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
|
||||
fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
|
||||
}"
|
||||
class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script src="./index.wxs" module="swipe" lang="wxs"></script>
|
||||
<script>
|
||||
// #ifdef APP-VUE|| MP-WEIXIN || H5
|
||||
import mpwxs from './mpwxs'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
import bindingx from './bindingx.js'
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
|
||||
import mixins from './mpother'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
import mpalipay from './mpalipay'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* SwipeActionItem 滑动操作子组件
|
||||
* @description 通过滑动触发选项的容器
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
|
||||
* @property {Boolean} show = [true|false] 开启关闭组件，auto-close = false 时生效
|
||||
* @property {Boolean} disabled = [true|false] 是否禁止滑动
|
||||
* @property {Boolean} autoClose = [true|false] 其他组件开启的时候，当前组件是否自动关闭
|
||||
* @property {Array} options 组件选项内容及样式
|
||||
* @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
|
||||
* @event {Function} change 组件打开或关闭时触发，true：开启状态；false：关闭状态
|
||||
*/
|
||||
|
||||
export default {
|
||||
// #ifdef APP-VUE|| MP-WEIXIN||H5
|
||||
mixins: [mpwxs],
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
mixins: [bindingx],
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
|
||||
mixins: [mixins],
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
mixins: [mpalipay],
|
||||
// #endif
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 按钮内容
|
||||
*/
|
||||
options: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 禁用
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 变量控制开关
|
||||
*/
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 是否自动关闭
|
||||
*/
|
||||
autoClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
inject: ['swipeaction']
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uni-swipe {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-swipe-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-swipe_content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-swipe_move-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-swipe_box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-swipe_button-group {
|
||||
/* #ifndef APP-VUE|| MP-WEIXIN||H5 */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-swipe_button {
|
||||
/* #ifdef APP-NVUE */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.uni-swipe_button-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ani {
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
/* #ifdef MP-ALIPAY */
|
||||
.movable-area {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.movable-view {
|
||||
position: relative;
|
||||
width: 160%;
|
||||
height: 45px;
|
||||
z-index: 2;
|
||||
}
|
||||
.transition {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.movable-view-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* SwipeAction 滑动操作
|
||||
* @description 通过滑动触发选项的容器
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=181
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
swipeaction: this
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.children = []
|
||||
},
|
||||
methods: {
|
||||
closeOther(vm) {
|
||||
let children = this.children
|
||||
children.forEach((item, index) => {
|
||||
if (vm === item) return
|
||||
// 支付宝执行以下操作
|
||||
// #ifdef MP-ALIPAY
|
||||
if (item.isopen) {
|
||||
item.close()
|
||||
}
|
||||
// #endif
|
||||
|
||||
// app vue 端、h5 、微信、支付宝 执行以下操作
|
||||
// #ifdef APP-VUE || H5 || MP-WEIXIN
|
||||
let position = item.position[0]
|
||||
let show = position.show
|
||||
if (show) {
|
||||
position.show = false
|
||||
}
|
||||
// #endif
|
||||
|
||||
// nvue 执行以下操作
|
||||
// #ifdef APP-NVUE || MP-BAIDU || MP-QQ || MP-TOUTIAO
|
||||
item.close()
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
64
pageB/components/sdetails/guige.vue
Normal file
64
pageB/components/sdetails/guige.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="guige">
|
||||
<view class="title">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="item">
|
||||
<text v-for="(i,j) in item" @click="select = j" :class="select == j ? 'xuanzhong' : ''" :key="j">
|
||||
{{i}}
|
||||
</text>
|
||||
<!-- <text @click="select = 1" :class="select == 1 ? 'xuanzhong' : ''">S</text> -->
|
||||
<!-- <text @click="select = 2" :class="select == 2 ? 'xuanzhong' : ''">M</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.guige{
|
||||
margin-top: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: #ececec solid 2rpx;
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 29rpx;
|
||||
|
||||
}
|
||||
.item{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
>text{
|
||||
min-width: 120rpx;
|
||||
height: 60rpx;
|
||||
background-color: #ececec;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
.xuanzhong{
|
||||
border: #ff780f 1rpx solid;
|
||||
color: #FF780F;
|
||||
background-color: #FFF1E6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name:"guige",
|
||||
data(){
|
||||
return {
|
||||
select:0
|
||||
}
|
||||
},
|
||||
props:['item','title'],
|
||||
watch:{
|
||||
select(){
|
||||
// console.log(this.select)
|
||||
this.$emit("sel",this.select)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,36 +1,109 @@
|
||||
<template>
|
||||
<view class="tloos">
|
||||
<view class="navs">
|
||||
<image></image>
|
||||
店铺
|
||||
<view>
|
||||
<view class="tloos">
|
||||
<view class="navs">
|
||||
<image></image>
|
||||
店铺
|
||||
</view>
|
||||
<view class="navs" style="margin-right:30rpx">
|
||||
<image></image>
|
||||
客服
|
||||
</view>
|
||||
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
|
||||
<view class="button" style="background:rgba(253,211,96,1);" @click="buy(2)">加入购物车</view>
|
||||
<view class="button" style="background:rgba(255,120,15,1);" @click="buy(1)">立即购买</view>
|
||||
|
||||
</view>
|
||||
<view class="navs" style="margin-right:30rpx">
|
||||
<image></image>
|
||||
客服
|
||||
</view>
|
||||
<view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
|
||||
<view class="button" style="background:rgba(253,211,96,1);" @click="addCart">加入购物车</view>
|
||||
<view class="button" style="background:rgba(255,120,15,1);">立即购买</view>
|
||||
<u-toast ref="uToast" />
|
||||
<u-popup v-model="show" mode="bottom">
|
||||
<scroll-view scroll-y="true" class="popup">
|
||||
<view>
|
||||
<view class="head">
|
||||
<image class="image" :src="info.goods_image"></image>
|
||||
<view class="info">
|
||||
<text class="u-line-2">{{info.goods_name}}</text>
|
||||
<text>￥{{info.goods_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<guige @sel="self" ref="guige" v-for="(item,index) in info.spec_value" :key="index" :title="info.spec_name[index]" :item="item"></guige>
|
||||
<view class="num">
|
||||
<text>购买数量</text>
|
||||
<u-number-box v-model="value" @change="valChange"></u-number-box>
|
||||
</view>
|
||||
<view style="height:180rpx"></view>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
|
||||
</scroll-view>
|
||||
</u-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import guige from "./guige"
|
||||
export default {
|
||||
name:"tloos",
|
||||
props: ['id'],
|
||||
props: ['id','info'],
|
||||
components:{
|
||||
guige
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
show:false,
|
||||
value:1,
|
||||
sel:"",
|
||||
quanxuan:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addCart() {
|
||||
this.$u.api.addCart({
|
||||
goods_id: this.id,
|
||||
quantity: 1,
|
||||
}).then(res => {
|
||||
this.$refs.uToast.show({
|
||||
title: res.message,
|
||||
type: res.errCode == 0 ? 'success' : 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
buy(type){
|
||||
let that = this;
|
||||
if(this.show){
|
||||
if(this.info.spec_value == null){
|
||||
this.$emit("buy",{type,value:that.value})
|
||||
}else if(this.quanxuan){
|
||||
this.$emit("buy",{type,value:that.value})
|
||||
}else{
|
||||
this.$refs.uToast.show({
|
||||
title: '请选择规格',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.show = true
|
||||
}
|
||||
|
||||
},
|
||||
valChange(e) {
|
||||
console.log(this.value)
|
||||
},
|
||||
self(){
|
||||
// console.log(this.$refs.guige)
|
||||
let index = 0;
|
||||
let arr = [];
|
||||
for(let i in this.info.spec_value){
|
||||
// console.log(i)
|
||||
// console.log(this.$refs.guige[index++].select)
|
||||
// index++;
|
||||
let sel = this.$refs.guige[index++].select
|
||||
if(sel != 0){
|
||||
arr.push(sel)
|
||||
}
|
||||
|
||||
}
|
||||
// console.log(arr.length)
|
||||
if(arr.length == index){
|
||||
this.sel = arr.join("|")
|
||||
this.quanxuan = true
|
||||
// console.log(this.sel)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
sel(){
|
||||
// console.log(this.sel)
|
||||
this.$emit('xuanze',this.sel)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -42,6 +115,7 @@ export default {
|
||||
width: 100%;
|
||||
bottom:0;
|
||||
border-top: 1rpx solid #ececec;
|
||||
z-index: 1000000;
|
||||
.navs{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -67,5 +141,48 @@ export default {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.popup{
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
max-height: 750rpx;
|
||||
.head{
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
.image{
|
||||
width: 195rpx;
|
||||
height: 195rpx;
|
||||
border-radius: 10rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
padding: 21rpx 0;
|
||||
justify-content: space-between;
|
||||
margin-left: 27rpx;
|
||||
flex-direction: column;
|
||||
>text:first-child{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
>text:last-child{
|
||||
font-size: 30rpx;
|
||||
color: #ff3131;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num{
|
||||
height: 84rpx;
|
||||
display: flex;
|
||||
border-bottom: #ececec solid 2rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
>text{
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -23,18 +23,22 @@
|
||||
<view class="rich">
|
||||
<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
|
||||
</view>
|
||||
<tloos :id="goodsInfo.goods_commonid"></tloos>
|
||||
<tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="info"></tloos>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import navs from "../components/sdetails/navs"
|
||||
import tloos from "../components/sdetails/tloos"
|
||||
export default {
|
||||
export default {
|
||||
name:"sdetails",
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
goodsInfo: {},
|
||||
goodsInfo: {},
|
||||
info:{},
|
||||
glist:[],
|
||||
id:0
|
||||
}
|
||||
},
|
||||
components:{
|
||||
@ -42,10 +46,25 @@ export default {
|
||||
tloos
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getGoodsDetails(option.id);
|
||||
this.getGoodsDetails(option.id);
|
||||
|
||||
},
|
||||
methods: {
|
||||
buy(info){
|
||||
if(info.type == 2){
|
||||
this.$u.api.addCart({
|
||||
goods_id: this.id,
|
||||
quantity: info.value,
|
||||
}).then(res => {
|
||||
this.$refs.uToast.show({
|
||||
title: res.errCode[1],
|
||||
type: res.errCode == 0 ? 'success' : 'warning',
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
getGoodsDetails(id) {
|
||||
this.id = id;
|
||||
this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
|
||||
if (res.errCode == 0) {
|
||||
this.goodsInfo = res.data;
|
||||
@ -58,8 +77,17 @@ export default {
|
||||
// console.log(this.goodsInfo.mobile_body);
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.$u.api.goodsInfo({id}).then((res)=>{
|
||||
console.log(res)
|
||||
this.info = res.data.goods;
|
||||
this.glist = res.data.spec_list;
|
||||
})
|
||||
},
|
||||
xuanze(id){
|
||||
console.log(id)
|
||||
this.getGoodsDetails(this.glist[id])
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
<image src="../static/image/2.png" class="address-icon"></image>
|
||||
<view class="address">
|
||||
<view class="user-info">
|
||||
<view>胖胖</view>
|
||||
<view>18220171014</view>
|
||||
<view>{{ addressInfo.address_realname }}</view>
|
||||
<view>{{ addressInfo.address_mob_phone }}</view>
|
||||
</view>
|
||||
<view class="address-text u-line-2">山东省泰安市泰山区东岳大街与克山路交汇口银山店四楼橙天影视南邻山东省泰安市泰山区东岳大街与克山路交汇口银山店四楼橙天影视南邻</view>
|
||||
<view class="address-text u-line-2">{{ addressInfo.area_info + addressInfo.address_detail }}</view>
|
||||
</view>
|
||||
<image src="../static/image/1.png" class="right"></image>
|
||||
</view>
|
||||
@ -75,6 +75,8 @@ export default {
|
||||
return {
|
||||
orderInfo: {},
|
||||
totalPrice: '0.00',
|
||||
addressInfo: {},
|
||||
freight: '',
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
@ -92,36 +94,24 @@ export default {
|
||||
onLoad(option) {
|
||||
console.log(JSON.parse(option.info));
|
||||
this.orderInfo = JSON.parse(option.info);
|
||||
// this.orderListInit();
|
||||
this.addressInfo = this.orderInfo.address_info;
|
||||
this.showTotalPrice();
|
||||
this.getFreight();
|
||||
},
|
||||
methods: {
|
||||
// orderListInit() {
|
||||
// this.orderList = this.orderInfo.store_list;
|
||||
// for (const key in this.orderList) {
|
||||
// if (this.orderList.hasOwnProperty(key)) {
|
||||
// const element = this.orderList[key];
|
||||
// let tempArray = Object.entries(this.orderInfo.store_cart_list);
|
||||
// tempArray.forEach(item => {
|
||||
// if (item[0])
|
||||
// })
|
||||
// let temp = this.orderInfo.store_cart_list.filters(store => {
|
||||
// return store.store_id == item.store_id
|
||||
// })
|
||||
// element
|
||||
// }
|
||||
// }
|
||||
// this.orderList.forEach(item => {
|
||||
// let temp = this.orderInfo.store_cart_list.filters(store => {
|
||||
// return store.store_id == item.store_id
|
||||
// })
|
||||
// Object.assign(item, { goods_list: temp });
|
||||
// })
|
||||
// console.log(this.orderList);
|
||||
|
||||
// },
|
||||
showTotalPrice() {
|
||||
|
||||
},
|
||||
getFreight() {
|
||||
this.$u.api.getFreight({
|
||||
freight_hash: this.orderInfo.freight_hash,
|
||||
city_id: this.addressInfo.city_id,
|
||||
area_id: this.addressInfo.area_id,
|
||||
}).then(res => {
|
||||
if(res.errCode == 0) {
|
||||
// this.freight = res.
|
||||
}
|
||||
})
|
||||
},
|
||||
settlement() {
|
||||
uni.navigateTo({
|
||||
@ -177,6 +167,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-bottom: 100rpx;
|
||||
> view {
|
||||
.goods-info {
|
||||
background-color: #ffffff;
|
||||
@ -220,6 +211,7 @@ export default {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
// width: 418rpx;
|
||||
height: 160rpx;
|
||||
display: flex;
|
||||
|
||||
@ -85,6 +85,7 @@ export default {
|
||||
},
|
||||
// 结算
|
||||
settlementOrder() {
|
||||
// 拼接后端需要的数据形式
|
||||
let id = [], temp = '';
|
||||
this.checkedGoods.forEach(item => {
|
||||
temp = item.cart_id + '|' + item.goods_num;
|
||||
@ -147,16 +148,14 @@ export default {
|
||||
this.cartUpdateNumber(e.index, e.value);
|
||||
},
|
||||
async cartUpdateNumber(id, number) {
|
||||
try {
|
||||
await this.$u.api.cartUpdateNumber({
|
||||
cart_id: id,
|
||||
quantity: number,
|
||||
}).then(res => {
|
||||
this.getCartList();
|
||||
})
|
||||
} catch (error) {
|
||||
await this.$u.api.cartUpdateNumber({
|
||||
cart_id: id,
|
||||
quantity: number,
|
||||
}).then(res => {
|
||||
this.getCartList();
|
||||
}
|
||||
}).catch(() => {
|
||||
this.geCartList();
|
||||
})
|
||||
},
|
||||
totalChange(e) {
|
||||
// 切换所有商品的状态
|
||||
@ -193,16 +192,7 @@ export default {
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(btn) {
|
||||
console.log(btn);
|
||||
// this.status = btn.text;
|
||||
// #ifdef H5
|
||||
if(this.status == '编辑'){
|
||||
this.status = "完成";
|
||||
} else {
|
||||
this.status = "编辑";
|
||||
}
|
||||
console.log(this.status);
|
||||
// #endif
|
||||
// console.log(btn);
|
||||
if(btn.index == 0){
|
||||
let pages = getCurrentPages();
|
||||
let page = pages[pages.length - 1];
|
||||
|
||||
26
pageC/components/merchant/image-top.vue
Normal file
26
pageC/components/merchant/image-top.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<view class="imageTop">
|
||||
<image :src="url"></image>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.imageTop{
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
margin-bottom: 20rpx;
|
||||
>image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name:"imageTop",
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
props:['url']
|
||||
}
|
||||
</script>
|
||||
28
pageC/components/merchant/list-item.vue
Normal file
28
pageC/components/merchant/list-item.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="listItem">
|
||||
<video v-if="type == '2'" :src="url" :show-fullscreen-btn="true"></video>
|
||||
<image v-else :src="url"></image>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.listItem{
|
||||
width: 365rpx;
|
||||
height: 500rpx;
|
||||
margin-bottom: 20rpx;
|
||||
>image,video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name:"listItem",
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props:['url','type']
|
||||
}
|
||||
</script>
|
||||
26
pageC/components/merchant/video-top.vue
Normal file
26
pageC/components/merchant/video-top.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<view class="videoTop">
|
||||
<video :src="url" :show-fullscreen-btn="true"></video>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.videoTop{
|
||||
width: 100%;
|
||||
height: 284rpx;
|
||||
margin-bottom: 20rpx;
|
||||
>video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name:"videoTop",
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
props:['url']
|
||||
}
|
||||
</script>
|
||||
@ -38,7 +38,14 @@
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="classify" v-if="cur==0">
|
||||
111
|
||||
<view v-for="item in indextop" :key="item.id">
|
||||
<videoTop :url="item.url" v-if="item.type == 2"></videoTop>
|
||||
<imageTop v-else :url="item.url"></imageTop>
|
||||
</view>
|
||||
<view style="display: flex;flex-wrap: wrap;">
|
||||
<listitem :style="{'margin-left': index%2 == 1 ? '20rpx':'0'}" v-for="(item,index) in indexlist" :key="item.id" :type="item.type" :url="item.url"></listitem>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 商品筛选排序未完成 -->
|
||||
<view class="item" v-if="cur==1">
|
||||
@ -67,16 +74,25 @@
|
||||
</template>
|
||||
<script>
|
||||
import item from "@/components/shop/list/item"
|
||||
import videoTop from "../components/merchant/video-top"
|
||||
import imageTop from "../components/merchant/image-top"
|
||||
import listitem from "../components/merchant/list-item"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
cur: 0,
|
||||
list:[]
|
||||
list:[],
|
||||
indexlist:[],
|
||||
indextop:[]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
item
|
||||
item,
|
||||
videoTop,
|
||||
imageTop,
|
||||
listitem
|
||||
},
|
||||
methods: {
|
||||
toDetailsPage() {
|
||||
@ -87,9 +103,14 @@ export default {
|
||||
},
|
||||
onLoad(){
|
||||
this.$u.api.getStoreGoodsList({id:1}).then((res)=>{
|
||||
console.log(res.data)
|
||||
// console.log(res.data)
|
||||
this.list= res.data.list
|
||||
})
|
||||
this.$u.api.getStoreImgVideoList({id:1}).then((res)=>{
|
||||
console.log(res.data)
|
||||
this.indextop = [res.data[0],res.data[1]]
|
||||
this.indexlist = res.data.slice(2,)
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -155,7 +176,7 @@ export default {
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
height: 140rpx;
|
||||
// height: 140rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<view class="edit-info">
|
||||
<view class="user-info">
|
||||
<view class="info-avatar">
|
||||
<image src="../static/mine/23.png"></image>
|
||||
<view class="info-avatar" @click="changeAvatar">
|
||||
<u-avatar :src="avatar" :size="120"></u-avatar>
|
||||
<view class="avatar-text">更换头像</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">昵称</view>
|
||||
@ -26,7 +27,7 @@
|
||||
<image src="../static/mine/21.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit-tips">注意：修改手机号需要原手机号获取验证码，无原手机验证码，请联系后台</view>
|
||||
<view class="edit-tips">注意：修改手机号需要原手机号获取验证码，无原手机验证码，请联系客服</view>
|
||||
<view class="edit-btn" @click="updateMemberInfo">完成</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -55,7 +56,7 @@ export default {
|
||||
minute: false,
|
||||
second: false
|
||||
},
|
||||
nickname: '胖胖',
|
||||
nickname: '',
|
||||
gender: '', // 1男 2女
|
||||
birthday: '',
|
||||
phoneNumber: '',
|
||||
@ -65,15 +66,37 @@ export default {
|
||||
onLoad() {
|
||||
this.getUserInfo();
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
if( e.index == 0 ) uni.navigateBack();
|
||||
},
|
||||
methods: {
|
||||
changeAvatar() {
|
||||
const url = this.$u.http.config.baseUrl + '/Upload/uploadfile';
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album'],
|
||||
success: (res) => {
|
||||
this.avatar = res.tempFilePaths[0];
|
||||
common.uploadFile({
|
||||
url: url,
|
||||
filePath: res.tempFilePaths[0]
|
||||
}).then(result => {
|
||||
this.avatar = result;
|
||||
}, error => {
|
||||
this.$u.toast(error);
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
getUserInfo() {
|
||||
this.$u.api.getMemberInfo().then(res => {
|
||||
if (res.errCode == 0) {
|
||||
let userInfo = res.data.MemberArray;
|
||||
[this.nickname, this.phoneNumber, this.birthday, this.gender, this.avatar] = [
|
||||
userInfo.member_nickname,
|
||||
userInfo.member_mobile,
|
||||
common.timestampToDate({timestamp: userInfo.member_birthday}),
|
||||
userInfo.member_mobile,
|
||||
userInfo.member_birthday,
|
||||
userInfo.member_sex,
|
||||
userInfo.member_avatar,
|
||||
];
|
||||
@ -115,15 +138,16 @@ export default {
|
||||
padding-top: 1rpx;
|
||||
.user-info {
|
||||
.info-avatar {
|
||||
text-align: center;
|
||||
height: 160rpx;
|
||||
height: 202rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,1);
|
||||
> image {
|
||||
flex-shrink: 0;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 20rpx;
|
||||
.avatar-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255,120,15,1);
|
||||
}
|
||||
}
|
||||
.info-item {
|
||||
|
||||
@ -3,37 +3,58 @@
|
||||
<view class="integral-top">
|
||||
<view>
|
||||
<view class="title">总积分</view>
|
||||
<view class="value">999</view>
|
||||
<view class="value">{{ memberInfo.member_points }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="title">经验值</view>
|
||||
<view class="value">999</view>
|
||||
<view class="value">{{ memberInfo.member_exppoints }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view @click="viewProgress">
|
||||
<view class="title">预计进度</view>
|
||||
<view class="value">999</view>
|
||||
<!-- <view class="value">{{ memberInfo.next_grade_exppoints_diff }}</view> -->
|
||||
<view class="value">
|
||||
<image src="/static/image/mine/32.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="integral-botom">
|
||||
<scroll-view scroll-y class="integral-botom" :style="{ height: integralHeight }">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import common from '@/static/js/common.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: '<h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1>',
|
||||
integralHeight: 0
|
||||
memberInfo: {},
|
||||
integralHeight: 0,
|
||||
nodes: '',
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.setIntegralHeight();
|
||||
this.getMemberPointsStat();
|
||||
},
|
||||
methods: {
|
||||
setIntegralHeight() {
|
||||
// this.integralHeight =
|
||||
}
|
||||
const res = uni.getSystemInfoSync();
|
||||
// console.log(res.windowHeight);
|
||||
this.integralHeight = res.windowHeight - 251 / 2 + 'px';
|
||||
},
|
||||
getMemberPointsStat() {
|
||||
this.$u.api.getMemberPointsStat().then((res)=>{
|
||||
if (res.errCode == 0) {
|
||||
this.memberInfo = res.data;
|
||||
this.nodes = common.unescapeHTML(this.memberInfo.points_rule);
|
||||
}
|
||||
})
|
||||
},
|
||||
viewProgress() {
|
||||
this.$u.route({
|
||||
url: '/pageE/mine/MineProgress'
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -61,13 +82,19 @@ export default {
|
||||
font-size: 48rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,1);
|
||||
> image {
|
||||
width: 52rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.integral-botom {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
position: absolute;
|
||||
width: 750rpx;
|
||||
height: calc(100vh - 251rpx);
|
||||
width: 100%;
|
||||
// height: calc(100vh - 251rpx);
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
top: 251rpx;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<view class="member">
|
||||
<view>
|
||||
<!-- <view> -->
|
||||
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
|
||||
</view>
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish">
|
||||
<!-- </view> -->
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y class="integral">
|
||||
<view class="integral">
|
||||
<view class="integral-top">
|
||||
<view>
|
||||
<view class="title">总积分</view>
|
||||
@ -15,31 +15,20 @@
|
||||
<view class="title">经验值</view>
|
||||
<view class="value">{{ memberInfo.member_exppoints }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view @click="viewProgress">
|
||||
<view class="title">预计进度</view>
|
||||
<view class="value">999</view>
|
||||
<view class="value">{{ memberInfo.next_grade_exppoints_diff }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="integral-botom">
|
||||
<scroll-view scroll-y class="integral-botom" :style="{ height: richHeight }">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y class="coupon">
|
||||
<view v-for="(item, index) in 13" :key="index" class="coupon-item">
|
||||
<img src="../static/mine/23.png" />
|
||||
<view class="coupon-main">
|
||||
<view class="coupon-title">萌店十元优惠券</view>
|
||||
<view class="coupon-date">
|
||||
<img src="../static/mine/26.png" />
|
||||
<view>2020.05.17-2020.06.17</view>
|
||||
</view>
|
||||
<view class="coupon-integral">299积分</view>
|
||||
</view>
|
||||
<view class="coupon-btn">兑换</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="coupon">
|
||||
<CouponView></CouponView>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y class="details">
|
||||
@ -52,12 +41,15 @@
|
||||
{{ item.pl_addtime > 0 ? item.pl_addtime : '+' + 10.00 }}
|
||||
</view>
|
||||
</view>
|
||||
<u-empty text="暂无明细" mode="data" color="#000" v-if="!pointslogList.length"></u-empty>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import common from '@/static/js/common.js';
|
||||
import CouponView from "./MemberServeCoupon";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -68,16 +60,22 @@ export default {
|
||||
}, {
|
||||
name: '积分明细'
|
||||
}],
|
||||
richHeight: '',
|
||||
swiperHeight: '',
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
nodes: '<h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1>',
|
||||
pointslogList: [],
|
||||
memberInfo: {}
|
||||
pointslogList: [],
|
||||
memberInfo: {},
|
||||
nodes: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CouponView
|
||||
},
|
||||
onShow() {
|
||||
this.getMemberPointsStat();
|
||||
this.getPointslogList();
|
||||
this.setViewHeight();
|
||||
},
|
||||
methods: {
|
||||
tabsChange(index) {
|
||||
@ -92,6 +90,7 @@ export default {
|
||||
this.$u.api.getMemberPointsStat().then((res)=>{
|
||||
if (res.errCode == 0) {
|
||||
this.memberInfo = res.data;
|
||||
this.nodes = common.unescapeHTML(this.memberInfo.points_rule);
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -101,7 +100,19 @@ export default {
|
||||
this.pointslogList = res.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
setViewHeight() {
|
||||
const res = uni.getSystemInfoSync();
|
||||
// console.log(res.windowHeight);
|
||||
this.richHeight = res.windowHeight - (88 + 250) / 2 + 'px';
|
||||
// console.log(this.richHeight);
|
||||
this.swiperHeight = res.windowHeight - 88 / 2 + 'px';
|
||||
},
|
||||
viewProgress() {
|
||||
this.$u.route({
|
||||
url: '/pageE/mine/MineProgress'
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -111,18 +122,20 @@ export default {
|
||||
background-color: #ECECEC;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> uni-swiper {
|
||||
flex: 1;
|
||||
}
|
||||
// > uni-swiper {
|
||||
// flex: 1;
|
||||
// height: calc()
|
||||
// }
|
||||
.swiper-item {
|
||||
padding-top: 10rpx;
|
||||
.integral {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.integral-top {
|
||||
padding: 79rpx 88rpx;
|
||||
width: 750rpx;
|
||||
height: 271rpx;
|
||||
height: 270rpx;
|
||||
background: linear-gradient(0deg,rgba(246,211,119,1) 1%,rgba(240,154,105,1) 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -142,66 +155,18 @@ export default {
|
||||
}
|
||||
}
|
||||
.integral-botom {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
position: absolute;
|
||||
width: 750rpx;
|
||||
// height: 856rpx;
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
top: 251rpx;
|
||||
top: 250rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
.coupon {
|
||||
height: 100%;
|
||||
.coupon-item {
|
||||
padding: 30rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 2rpx;
|
||||
> img {
|
||||
width: 180rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.coupon-main {
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
.coupon-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 29rpx 0 20rpx;
|
||||
> img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
> view {
|
||||
font-size: 24rpx;
|
||||
color: rgba(153,153,153,1);
|
||||
}
|
||||
}
|
||||
.coupon-integral {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255,120,15,1);
|
||||
}
|
||||
}
|
||||
.coupon-btn {
|
||||
margin-left: auto;
|
||||
width: 85rpx;
|
||||
// height: 42rpx;
|
||||
border: 2rpx solid rgba(255,120,15,1);
|
||||
border-radius: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255,120,15,1);
|
||||
line-height: 42rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.details {
|
||||
height: 100%;
|
||||
|
||||
161
pageE/mine/MemberServeCoupon.vue
Normal file
161
pageE/mine/MemberServeCoupon.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view class="coupon-swiper">
|
||||
<u-tabs-swiper ref="coupon" :list="couponGroupList" :is-scroll="true" active-color="#FF780F" :current="couponCurrent" font-size="24" :show-bar="false" @change="couponTabsChange" height="88" ></u-tabs-swiper>
|
||||
<swiper :current="swiperCouponCurrent" @animationfinish="couponAnimationFinish" :style="{ height: swiperHeight }">
|
||||
<swiper-item class="swiper-coupon-item" v-for="(_, i) in couponGroupList" :key="i">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view v-for="(coupon, index) in couponList" :key="index" class="coupon-item">
|
||||
<!-- <img src="../static/mine/23.png" />
|
||||
<view class="coupon-main">
|
||||
<view class="coupon-title">萌店十元优惠券</view>
|
||||
<view class="coupon-date">
|
||||
<img src="../static/mine/26.png" />
|
||||
<view>2020.05.17-2020.06.17</view>
|
||||
</view>
|
||||
<view class="coupon-integral">299积分</view>
|
||||
</view>
|
||||
<view class="coupon-btn">兑换</view> -->
|
||||
<Coupon :couponInfo="coupon" :status='0' :type="0" @exchange="exchangeCoupon($event)"></Coupon>
|
||||
</view>
|
||||
<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList.length"></u-empty>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import Coupon from "@/components/mine/coupon/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperHeight: '',
|
||||
couponCurrent: 0,
|
||||
swiperCouponCurrent: 0,
|
||||
couponGroupList: [
|
||||
{
|
||||
name: '平台'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}, {
|
||||
name: '分类名称'
|
||||
}
|
||||
],
|
||||
couponList: [
|
||||
{
|
||||
index: 0
|
||||
},
|
||||
{
|
||||
index: 1
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Coupon
|
||||
},
|
||||
created() {
|
||||
this.setViewHeight();
|
||||
},
|
||||
methods: {
|
||||
exchangeCoupon(id) {
|
||||
console.log(id);
|
||||
|
||||
},
|
||||
couponTabsChange(index) {
|
||||
this.couponCurrent = index;
|
||||
},
|
||||
couponAnimationFinish(e) {
|
||||
const current = e.detail.current;
|
||||
this.swiperCouponCurrent = current;
|
||||
this.couponCurrent = current;
|
||||
},
|
||||
setViewHeight() {
|
||||
const res = uni.getSystemInfoSync();
|
||||
this.swiperHeight = res.windowHeight - ((88 + 10 + 88) / 2) + 'px';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.coupon-swiper {
|
||||
.swiper-coupon-item {
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx {
|
||||
top: 0;
|
||||
};
|
||||
.coupon-item {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
// .coupon-item {
|
||||
// padding: 30rpx;
|
||||
// background-color: #ffffff;
|
||||
// display: flex;
|
||||
// align-items: flex-end;
|
||||
// // margin-bottom: 2rpx;
|
||||
// > img {
|
||||
// width: 180rpx;
|
||||
// height: 160rpx;
|
||||
// border-radius: 10rpx;
|
||||
// margin-right: 30rpx;
|
||||
// }
|
||||
// .coupon-main {
|
||||
// .coupon-title {
|
||||
// font-size: 30rpx;
|
||||
// color: rgba(51,51,51,1);
|
||||
// }
|
||||
// .coupon-date {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin: 29rpx 0 20rpx;
|
||||
// > img {
|
||||
// width: 24rpx;
|
||||
// height: 24rpx;
|
||||
// margin-right: 15rpx;
|
||||
// }
|
||||
// > view {
|
||||
// font-size: 24rpx;
|
||||
// color: rgba(153,153,153,1);
|
||||
// }
|
||||
// }
|
||||
// .coupon-integral {
|
||||
// font-size: 30rpx;
|
||||
// font-weight: 500;
|
||||
// color: rgba(255,120,15,1);
|
||||
// }
|
||||
// }
|
||||
// .coupon-btn {
|
||||
// margin-left: auto;
|
||||
// width: 85rpx;
|
||||
// // height: 42rpx;
|
||||
// border: 2rpx solid rgba(255,120,15,1);
|
||||
// border-radius: 10rpx;
|
||||
// font-size: 26rpx;
|
||||
// color: rgba(255,120,15,1);
|
||||
// line-height: 42rpx;
|
||||
// text-align: center;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="information">
|
||||
<view class="info-avatar">
|
||||
<image src="../static/mine/23.png"></image>
|
||||
<u-avatar :src="userInfo.member_avatar" :size="120"></u-avatar>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">昵称</view>
|
||||
@ -13,7 +13,7 @@
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">生日</view>
|
||||
<view class="value">{{ userInfo.member_birthday | dateFormat }}</view>
|
||||
<view class="value">{{ userInfo.member_birthday }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">手机号</view>
|
||||
@ -21,7 +21,7 @@
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">等级</view>
|
||||
<view class="value">{{ userInfo.level }}</view>
|
||||
<view class="value">{{ userInfo.member_level }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="title">积分数</view>
|
||||
@ -41,17 +41,12 @@ export default {
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
onShow() {
|
||||
this.getUserInfo();
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
this.toEditPage();
|
||||
},
|
||||
filters: {
|
||||
dateFormat(value) {
|
||||
return common.timestampToDate({ timestamp: value });
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
this.$u.api.getMemberInfo().then(res => {
|
||||
@ -74,16 +69,11 @@ export default {
|
||||
background-color: #ECECEC;
|
||||
padding-top: 1rpx;
|
||||
.info-avatar {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 160rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
> image {
|
||||
flex-shrink: 0;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
|
||||
172
pageE/mine/MineProgress.vue
Normal file
172
pageE/mine/MineProgress.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<view class="progress">
|
||||
<view class="header">
|
||||
<view class="line-progress">
|
||||
<view class="rank-value">lv1</view>
|
||||
<view class="line-box">
|
||||
<u-line-progress :percent="70" :show-percent="false" inactive-color="#FFFFFF" active-color="#F1A36B" height="30"></u-line-progress>
|
||||
<text>78/99</text>
|
||||
</view>
|
||||
<view class="rank-value">lv2</view>
|
||||
</view>
|
||||
<view class="exp-value">经验值<span>78</span></view>
|
||||
<view class="distance">距离下一级还需要21经验值</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="title">
|
||||
<image src="/static/image/mine/34.png"></image>
|
||||
<text>等级定义</text>
|
||||
</view>
|
||||
<view class="rank-list">
|
||||
<view v-for="(rank, index) in rank" :key="index" class="list-item">
|
||||
<view class="rank-value">lv{{ rank.level }}</view>
|
||||
<view class="rank-interval"><span>经验值:</span>{{ rank.max == '--' ? rank.min + '及以上' : rank.min + '~' + rank.max }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rank: [
|
||||
{
|
||||
level: 1,
|
||||
min: 50,
|
||||
max: 99,
|
||||
},
|
||||
{
|
||||
level: 2,
|
||||
min: 100,
|
||||
max: 199,
|
||||
},
|
||||
{
|
||||
level: 3,
|
||||
min: 200,
|
||||
max: 399,
|
||||
},
|
||||
{
|
||||
level: 4,
|
||||
min: 400,
|
||||
max: 999,
|
||||
},
|
||||
{
|
||||
level: 5,
|
||||
min: 1000,
|
||||
max: 1999,
|
||||
},
|
||||
{
|
||||
level: 6,
|
||||
min: 2000,
|
||||
max: 4999,
|
||||
},
|
||||
{
|
||||
level: 7,
|
||||
min: 5000,
|
||||
max: '--',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.progress {
|
||||
.header {
|
||||
width: 750rpx;
|
||||
height: 271rpx;
|
||||
background: url('/static/image/mine/33.png') no-repeat left top / contain;
|
||||
padding: 30rpx {
|
||||
top: 82rpx;
|
||||
};
|
||||
color: #FFF;
|
||||
.line-progress {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 5rpx;
|
||||
.rank-value {
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
box-sizing: content-box;
|
||||
background:rgba(255,213,101,1);
|
||||
border-radius: 6rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.line-box {
|
||||
width: 400rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin: 0 16rpx;
|
||||
/deep/ .u-progress {
|
||||
.u-active {
|
||||
box-sizing: border-box;
|
||||
border: 4rpx solid #FFF;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
> text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.exp-value {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
> span {
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.distance {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.body {
|
||||
.title {
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(51,51,51,1);
|
||||
border-bottom: #ECECEC 1rpx solid;
|
||||
> image {
|
||||
width: 29rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.rank-list {
|
||||
padding: 30rpx;
|
||||
.list-item {
|
||||
margin-bottom: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.rank-value {
|
||||
color: #FFF;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
box-sizing: content-box;
|
||||
background:rgba(255,213,101,1);
|
||||
border-radius: 6rpx;
|
||||
padding: 0 10rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.rank-interval {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
> span {
|
||||
margin-right: 10rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
<view class="old-phone">
|
||||
<view class="phone-number">
|
||||
<view class="title">原手机号</view>
|
||||
<input type="text" v-model="oldNumber" placeholder="请输入手机号码" />
|
||||
<input type="text" v-model="oldMobile" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="code">
|
||||
<view class="title">验证码</view>
|
||||
@ -16,7 +16,7 @@
|
||||
<view class="new-phone">
|
||||
<view class="phone-number">
|
||||
<view class="title">新手机号</view>
|
||||
<input type="text" v-model="newNumber" placeholder="请输入手机号码" />
|
||||
<input type="text" v-model="newMobile" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<view class="code">
|
||||
<view class="title">验证码</view>
|
||||
@ -24,54 +24,59 @@
|
||||
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uNewCode" @change="newCodeChange" unique-key="new" change-text="x秒"></u-verification-code>
|
||||
<view class="get-code" @click="getCode(1)">{{ btnText[1] }}</view>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">注意：修改手机号需要原手机号获取验证码，无原手机验证码，请联系后台</view>
|
||||
<view class="btn">保存</view>
|
||||
<view class="tips">注意：修改手机号需要原手机号获取验证码，无原手机验证码，请联系客服</view>
|
||||
<view class="btn" @click="changeMemberPhone">保存</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
oldNumber: '',
|
||||
oldMobile: '',
|
||||
oldCode: '',
|
||||
newNumber: '',
|
||||
newMobile: '',
|
||||
newCode: '',
|
||||
btnText: ['获取验证码', '获取验证码'],
|
||||
seconds: 60, // 获取验证码间隔时间
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
if( e.index == 0 ) uni.navigateBack();
|
||||
},
|
||||
methods: {
|
||||
verifyValue(type) {
|
||||
const phone = type == 0 ? this.oldNumber : this.newNumber;
|
||||
return this.$u.test.mobile(phone);
|
||||
},
|
||||
// @param Number type 0: 原手机号 1: 新手机号
|
||||
getSmsCode (type) {
|
||||
if(!this.verifyValue(type)) {
|
||||
let tips = type == 0 ? '请填写正确的原手机号' : '请填写正确的新手机号';
|
||||
// 验证发送验证码
|
||||
verifySendCode(type) {
|
||||
const [phone, tips] = type == 0
|
||||
? [this.oldMobile, '请填写正确的原手机号']
|
||||
: [this.newMobile, '请填写正确的新手机号'];
|
||||
if (!this.$u.test.mobile(phone)) {
|
||||
this.$u.toast(tips);
|
||||
return false;
|
||||
}
|
||||
if(this.seconds > 0) {
|
||||
this.$u.toast('倒计时结束后再发送');
|
||||
return true;
|
||||
},
|
||||
// 验证修改绑定手机号
|
||||
verifyChangeMobile() {
|
||||
if(!this.$u.test.mobile(oldMobile)) {
|
||||
this.$u.toast('请填写正确的原手机号');
|
||||
return false;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
this.$u.api.sendSmsCode({
|
||||
member_mobile: type == 0 ? this.oldNumber: this.newNumber,
|
||||
smslog_type: 4 // 类型[1:注册,2:登录,3:找回密码,4:绑定手机]
|
||||
}).then(res => {
|
||||
uni.hideLoading();
|
||||
if(res.errCode == 0) {
|
||||
|
||||
} else {
|
||||
this.$u.toast(res.message);
|
||||
}
|
||||
})
|
||||
if(this.$u.test.isEmpty(oldCode)) {
|
||||
this.$u.toast('验证码为空');
|
||||
return false;
|
||||
}
|
||||
if(!this.$u.test.mobile(newMobile)) {
|
||||
this.$u.toast('请填写正确的新手机号');
|
||||
return false;
|
||||
}
|
||||
if(this.$u.test.isEmpty(newCode)) {
|
||||
this.$u.toast('验证码为空');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
oldCodeChange(text) {
|
||||
this.$set(this.btnText, 0, text);
|
||||
@ -79,40 +84,66 @@ export default {
|
||||
newCodeChange(text) {
|
||||
this.$set(this.btnText, 1, text);
|
||||
},
|
||||
// @param Number type 0: 原手机号 1: 新手机号
|
||||
async getSmsCode (type) {
|
||||
if(!this.verifySendCode(type)) return false;
|
||||
return await this.$u.api.sendSmsCode({
|
||||
member_mobile: type == 0 ? this.oldMobile: this.newMobile,
|
||||
smslog_type: 4 // 类型[1:注册,2:登录,3:找回密码,4:绑定手机]
|
||||
})
|
||||
},
|
||||
getCode(type) {
|
||||
const refs = type == 0 ? this.$refs.uOldCode : this.$refs.uNewCode;
|
||||
if(refs.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.getSmsCode(type).then(res => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
refs.start();
|
||||
}, 2000);
|
||||
if(res.errCode == 0) {
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast(res.message);
|
||||
// 通知验证码组件内部开始倒计时
|
||||
refs.start();
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: res.message,
|
||||
duration: 3000,
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
uni.hideLoading();
|
||||
this.$u.toast('验证码发送错误');
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
changeMemberPhone() {
|
||||
if(!this.verifyChangeMobile) return false;
|
||||
this.$u.api.changeMemberPhone({
|
||||
old_mobile: this.oldNumber,
|
||||
old_mobile: this.oldMobile,
|
||||
old_code: this.oldCode,
|
||||
new_mobile: this.newNumber,
|
||||
new_mobile: this.newMobile,
|
||||
new_code: this.newCode,
|
||||
}).then(res => {
|
||||
|
||||
if(res.errCode == 0) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
title: res.message
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
end() {
|
||||
this.$u.toast('倒计时结束');
|
||||
// this.$u.toast('倒计时结束');
|
||||
},
|
||||
start() {
|
||||
this.$u.toast('倒计时开始');
|
||||
}
|
||||
// this.$u.toast('倒计时开始');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<view class="complaints">
|
||||
<view class="complaints-box">
|
||||
<view class="complaints-box" v-for="item in feedbackList" :key="item.fb_id">
|
||||
<view class="suggestions">
|
||||
<view class="text">您的满意是对我们最大的支持，茫茫德铭阳光之中能够遇到亲也是我们的荣幸</view>
|
||||
<view class="text">{{ item.fb_content }}</view>
|
||||
<view class="image">
|
||||
<image v-for="(url, index) in imgList" :key="index" :src="url"></image>
|
||||
<image v-for="(url, index) in item.fb_images" :key="index" :src="url"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reply">
|
||||
<view class="reply-title">后台回复：</view>
|
||||
<view class="reply-content u-line-4">您的满意是对我们最大的支持，茫茫德铭阳光之中能够遇到亲也是我们的荣幸，您的评价是对我们付出最好的认可，我们会不断前行，不忘初衷，给亲们提供更好的服务和产品!我把对您的谢意写在纸上，被风吹走了;我把对您的谢意写在沙滩上，被海浪卷走了;我只好把对您的谢意写在解释里，这样才会永驻心间!感谢您对的支持!加油!加油!， 祝您生活愉快，工作顺利，期待我们下次合作愉快! ! !</view>
|
||||
<view class="reply-content u-line-4">{{ item.reply_content }}</view>
|
||||
</view>
|
||||
<view class="date">
|
||||
<image src="../static/mine/26.png"></image>
|
||||
<view>2020-05-14</view>
|
||||
<view>{{ reply_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -27,7 +27,9 @@ export default {
|
||||
require('../static/mine/23.png'),
|
||||
require('../static/mine/23.png'),
|
||||
require('../static/mine/23.png')
|
||||
]
|
||||
],
|
||||
feedbackList: [],
|
||||
page: 1, // 默认1
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
@ -35,6 +37,18 @@ export default {
|
||||
url: '/pageE/more/WriteComments'
|
||||
});
|
||||
},
|
||||
onShow() {
|
||||
this.getFeedbackList();
|
||||
},
|
||||
methods: {
|
||||
getFeedbackList() {
|
||||
this.$u.api.getFeedbackList({ page: this.page }).then(res => {
|
||||
if(res.errCode == 0) {
|
||||
this.feedbackList = res.data.feedbackList;
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -41,11 +41,14 @@ export default {
|
||||
address_id: this.address.address_id
|
||||
}).then((res)=>{
|
||||
if(res.errCode == 0) {
|
||||
this.$refs.uToast.show({
|
||||
title: res.message,
|
||||
type: 'success',
|
||||
uni.redirectTo({
|
||||
url: '/pageE/more/Address'
|
||||
})
|
||||
});
|
||||
// this.$refs.uToast.show({
|
||||
// title: res.message,
|
||||
// type: 'success',
|
||||
// url: '/pageE/more/Address'
|
||||
// })
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
title: res.message,
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
<view class="main-container">
|
||||
<textarea auto-height placeholder="发表您的意见吧，我们会做得更好." maxlength="200" v-model="text" />
|
||||
<u-upload
|
||||
ref="uUpload"
|
||||
@on-uploaded="onUploaded"
|
||||
ref="uUpload"
|
||||
:custom-btn="true"
|
||||
:max-count="count"
|
||||
:auto-upload="false"
|
||||
@ -21,6 +20,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
action: $u.http.baseUrl + 'Upload/uploadfile',
|
||||
count: 4, // 最大图片数量
|
||||
text: '',
|
||||
imageList: []
|
||||
@ -28,11 +28,33 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs.uUpload.upload();
|
||||
console.log(this.action);
|
||||
console.log(this.imageList);
|
||||
|
||||
// this.$refs.uUpload.upload();
|
||||
let promise = [];
|
||||
this.imageList.forEach(url => {
|
||||
// this.uploadImage(url);
|
||||
})
|
||||
Promise.all(promise).then(() => {
|
||||
|
||||
})
|
||||
},
|
||||
async uploadImage(file) {
|
||||
this.$u.api.uploadfile({
|
||||
file: file,
|
||||
}).then(res => {
|
||||
if(res.errCode == 0) {}
|
||||
})
|
||||
},
|
||||
writeFeedback() {
|
||||
this.$u.api.writeFeedback({
|
||||
fb_content: this.text,
|
||||
fb_images: '',
|
||||
}).then(res => {
|
||||
if(res.errCode == 0) {}
|
||||
})
|
||||
},
|
||||
onUploaded(list) {
|
||||
console.log(this.text, list)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -3,75 +3,16 @@
|
||||
<view>
|
||||
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="26" @change="tabsChange" height="88" :gutter="30"></u-tabs-swiper>
|
||||
</view>
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish">
|
||||
<swiper-item class="swiper-item">
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
|
||||
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
|
||||
<view>
|
||||
<view class="item-container" v-for="(item, index) in orderList" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
<view class="item-container" v-for="order in orderList" :key="order.order_id">
|
||||
<OrderItem :order="order"></OrderItem>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view>
|
||||
<view class="item-container" v-for="(item, index) in orderList" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view>
|
||||
<view class="item-container" v-for="(item, index) in orderList" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view>
|
||||
<view class="item-container" v-for="(item, index) in orderList" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view>
|
||||
<view class="item-container" v-for="(item, index) in orderList" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
|
||||
<view>
|
||||
<view class="item-container" v-for="(item, index) in orderList" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
|
||||
<view>
|
||||
<view class="item-container" v-for="(item, index) in orderList" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[6]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
|
||||
</view>
|
||||
<u-empty text="暂无订单" mode="order" color="#000000" v-if="!orderList.length"></u-empty>
|
||||
<u-loadmore :status="loadStatus[index]" bgColor="#ECECEC" margin-bottom="20" v-if="orderList.length >= 15"></u-loadmore>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
@ -97,44 +38,80 @@ export default {
|
||||
}, {
|
||||
name: '售后'
|
||||
}],
|
||||
orderList: 5,
|
||||
orderList: [],
|
||||
loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
|
||||
page: 0,
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
swiperHeight: '',
|
||||
timer: true,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
OrderItem
|
||||
},
|
||||
watch: {
|
||||
current() {
|
||||
this.page = 0;
|
||||
this.getOrderList('again');
|
||||
},
|
||||
},
|
||||
onLoad(option) {
|
||||
if(option.current) {
|
||||
this.current = Number(option.current);
|
||||
this.swiperCurrent = this.current;
|
||||
}
|
||||
this.getOrderList();
|
||||
const current = option.current ? Number(option.current) : 0;
|
||||
this.current = current;
|
||||
this.swiperCurrent = this.current;
|
||||
this.setViewHeight();
|
||||
},
|
||||
methods: {
|
||||
getOrderList() {
|
||||
this.$u.api.getOrderList({
|
||||
async getOrderList(reload = '') {
|
||||
let type;
|
||||
// state_type 订单状态：0:已取消 10:未付款 20:已付款 30:已发货 40:已收货
|
||||
switch (this.current) {
|
||||
case 1:
|
||||
type = 10; // 待支付
|
||||
break;
|
||||
case 2:
|
||||
type = 0; // 已取消
|
||||
break;
|
||||
case 3:
|
||||
type = 30; // 待收货
|
||||
break;
|
||||
case 4:
|
||||
type = -1; // 试穿试送
|
||||
break;
|
||||
case 5:
|
||||
type = 20; // 待评价
|
||||
break;
|
||||
case 6:
|
||||
type = 40; // 售后
|
||||
break;
|
||||
default:
|
||||
type = -1;
|
||||
break;
|
||||
}
|
||||
const res = await this.$u.api.getOrderList({
|
||||
page: this.page,
|
||||
}).then(res => {
|
||||
if(res.errCode == 0) {
|
||||
|
||||
}
|
||||
type: type,
|
||||
})
|
||||
this.timer = true;
|
||||
if(res.errCode == 0) {
|
||||
if(reload) this.orderList = res.data;
|
||||
else this.orderList.push(...res.data);
|
||||
}
|
||||
return res.data.length;
|
||||
},
|
||||
reachBottom() {
|
||||
// console.log(this.page);
|
||||
if(this.page >= 3) return;
|
||||
// 修改当前的 loadStatus
|
||||
console.log(this.loadStatus);
|
||||
if(!this.timer) return false;
|
||||
this.timer = false;
|
||||
this.loadStatus.splice(this.current, 1, "loading");
|
||||
this.page++;
|
||||
setTimeout(() => {
|
||||
this.orderList += 5;
|
||||
this.getOrderList.then(length => {
|
||||
this.loadStatus.splice(this.current, 1, "nomore");
|
||||
}, 1200);
|
||||
if(length == 0) this.page--;
|
||||
}).catch(() => {
|
||||
this.loadStatus.splice(this.current, 1, "nomore");
|
||||
this.page--;
|
||||
})
|
||||
},
|
||||
tabsChange(index) {
|
||||
this.current = Number(index);
|
||||
@ -144,7 +121,11 @@ export default {
|
||||
let current = Number(e.detail.current);
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
}
|
||||
},
|
||||
setViewHeight() {
|
||||
const sys = uni.getSystemInfoSync();
|
||||
this.swiperHeight = sys.windowHeight - 88 / 2 + 'px';
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -154,9 +135,9 @@ export default {
|
||||
background-color: #ECECEC;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> uni-swiper {
|
||||
flex: 1;
|
||||
}
|
||||
// > uni-swiper {
|
||||
// flex: 1;
|
||||
// }
|
||||
.swiper-item {
|
||||
.item-container {
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
@ -74,6 +74,7 @@ export default {
|
||||
return res.data.list;
|
||||
}
|
||||
},
|
||||
// 加载更多
|
||||
reachBottom() {
|
||||
// 修改当前的 loadStatus
|
||||
this.loadStatus = "loading";
|
||||
|
||||
@ -56,11 +56,14 @@ export default {
|
||||
time: new Date(this.time)
|
||||
}).then((res)=>{
|
||||
if(res.errCode == 0) {
|
||||
this.$refs.uToast.show({
|
||||
title: res.message,
|
||||
type: 'success',
|
||||
uni.redirectTo({
|
||||
url: '/pageE/tool/Manicure'
|
||||
})
|
||||
});
|
||||
// this.$refs.uToast.show({
|
||||
// title: res.message,
|
||||
// type: 'success',
|
||||
// url: '/pageE/tool/Manicure'
|
||||
// })
|
||||
} else {
|
||||
this.showToast(res.message, 'error');
|
||||
}
|
||||
|
||||
105
pageE/tool/MineCoupon.vue
Normal file
105
pageE/tool/MineCoupon.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view class="coupon">
|
||||
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
|
||||
<swiper-item class="swiper-item" v-for="(_, index) in list" :key="index">
|
||||
<scroll-view scroll-y class="scroll-coupon">
|
||||
<view class="coupon-item" v-for="(coupon, c_index) in test" :key="c_index">
|
||||
<Coupon :couponInfo="coupon" :status='index' :type="1" @use="useCoupon($event)"></Coupon>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import Coupon from "@/components/mine/coupon/index"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
name: '未使用'
|
||||
}, {
|
||||
name: '已使用'
|
||||
}, {
|
||||
name: '已过期'
|
||||
}],
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
swiperHeight: '',
|
||||
test: [
|
||||
{
|
||||
index: 0
|
||||
},
|
||||
{
|
||||
index: 1
|
||||
},
|
||||
{
|
||||
index: 2
|
||||
},
|
||||
{
|
||||
index: 3
|
||||
},
|
||||
{
|
||||
index: 4
|
||||
},
|
||||
{
|
||||
index: 5
|
||||
},
|
||||
{
|
||||
index: 6
|
||||
},
|
||||
{
|
||||
index: 7
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Coupon
|
||||
},
|
||||
onLoad() {
|
||||
this.setViewHeight();
|
||||
},
|
||||
methods: {
|
||||
useCoupon(id) {
|
||||
console.log(id);
|
||||
},
|
||||
setViewHeight() {
|
||||
const res = uni.getSystemInfoSync();
|
||||
this.swiperHeight = res.windowHeight - (88 / 2 + 11 / 2) + 'px';
|
||||
},
|
||||
tabsChange(index) {
|
||||
this.swiperCurrent = index;
|
||||
},
|
||||
animationfinish(e) {
|
||||
let current = e.detail.current;
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.coupon {
|
||||
overflow: hidden;
|
||||
.u-tabs {
|
||||
border: {
|
||||
top: 1rpx #ECECEC solid;
|
||||
bottom: 10rpx #ECECEC solid;
|
||||
};
|
||||
}
|
||||
.swiper-item {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 30rpx;
|
||||
.scroll-coupon {
|
||||
height: 100%;
|
||||
.coupon-item {
|
||||
margin-bottom: 20rpx;
|
||||
// position: relative;
|
||||
// z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,21 +1,20 @@
|
||||
<template>
|
||||
<view class="mine-history">
|
||||
<view class="history-box">
|
||||
<view v-for="(item, index) in historyList" :key="index" class="history-item">
|
||||
<view class="item-title">
|
||||
<image src="../static/mine/23.png"></image>
|
||||
<view>小米店铺</view>
|
||||
</view>
|
||||
<!-- <view class="item-image">
|
||||
<img src="../static/mine/23.png" />
|
||||
</view> -->
|
||||
<image src="../static/mine/23.png" class="item-image"></image>
|
||||
<view class="item-info">
|
||||
<view class="info-name">{{ item }}</view>
|
||||
<image src="../static/mine/22.png"></image>
|
||||
<scroll-view scroll-y class="history-box" @scrolltolower="reachBottom">
|
||||
<view class="item-box">
|
||||
<view v-for="(item, index) in historyList.slice(0, 50)" :key="index" class="history-item">
|
||||
<view class="item-title">
|
||||
<image :src="item.store_avatar"></image>
|
||||
<view>{{ item.store_name }}</view>
|
||||
</view>
|
||||
<image :src="item.goods_image" class="item-image"></image>
|
||||
<view class="item-info">
|
||||
<view class="info-name u-line-1">{{ item.goods_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus" bgColor="#ECECEC" margin-bottom="20" v-if="historyList.length > 9"></u-loadmore>
|
||||
</scroll-view>
|
||||
<u-empty text="暂无足迹" mode="list" color="#000" margin-top="240" v-if="!historyList.length"></u-empty>
|
||||
</view>
|
||||
</template>
|
||||
@ -24,18 +23,138 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
historyList: [1, 2, 3, 6]
|
||||
historyList: [
|
||||
{
|
||||
"goods_id": 13,
|
||||
"goodsbrowse_time": "2020-06-28 15:45:56",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
|
||||
"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
|
||||
"store_id": 1,//店铺id
|
||||
"store_name": "官方自营店铺",//店铺名
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
|
||||
},
|
||||
{
|
||||
"goods_id": 13,
|
||||
"goodsbrowse_time": "2020-06-28 15:45:56",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
|
||||
"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
|
||||
"store_id": 1,//店铺id
|
||||
"store_name": "官方自营店铺",//店铺名
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
|
||||
},
|
||||
{
|
||||
"goods_id": 13,
|
||||
"goodsbrowse_time": "2020-06-28 15:45:56",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
|
||||
"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
|
||||
"store_id": 1,//店铺id
|
||||
"store_name": "官方自营店铺",//店铺名
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
|
||||
},
|
||||
{
|
||||
"goods_id": 13,
|
||||
"goodsbrowse_time": "2020-06-28 15:45:56",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
|
||||
"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
|
||||
"store_id": 1,//店铺id
|
||||
"store_name": "官方自营店铺",//店铺名
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
|
||||
},
|
||||
{
|
||||
"goods_id": 13,
|
||||
"goodsbrowse_time": "2020-06-28 15:45:56",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
|
||||
"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
|
||||
"store_id": 1,//店铺id
|
||||
"store_name": "官方自营店铺",//店铺名
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
|
||||
},
|
||||
{
|
||||
"goods_id": 12,
|
||||
"goodsbrowse_time": "2020-06-28 15:44:41",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121050988491.jpg",
|
||||
"goods_name": "扬子(YAIR) 小2匹 冷暖 自动清洗 定频空调柜机",
|
||||
"store_id": 1,
|
||||
"store_name": "官方自营店铺",
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
|
||||
},
|
||||
{
|
||||
"goods_id": 11,
|
||||
"goodsbrowse_time": "2020-06-28 15:38:11",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120564717575.jpg",
|
||||
"goods_name": "1.5匹 变频 智能 二级能效极速侠 空调挂机",
|
||||
"store_id": 1,
|
||||
"store_name": "官方自营店铺",
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
|
||||
},
|
||||
{
|
||||
"goods_id": 9,
|
||||
"goodsbrowse_time": "2020-06-28 15:36:27",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120480147477.jpg",
|
||||
"goods_name": "长虹（CHANGHONG）39M1 39英寸 窄边高清液晶电视（黑色）",
|
||||
"store_id": 1,
|
||||
"store_name": "官方自营店铺",
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
|
||||
},
|
||||
{
|
||||
"goods_id": 8,
|
||||
"goodsbrowse_time": "2020-06-28 15:36:06",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120445748551.jpg",
|
||||
"goods_name": "先锋(Pioneer)LED-39B700S 39英寸 高清 网络 智能 液晶电视",
|
||||
"store_id": 1,
|
||||
"store_name": "官方自营店铺",
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
|
||||
},
|
||||
{
|
||||
"goods_id": 10,
|
||||
"goodsbrowse_time": "2020-06-24 16:14:29",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120493430154.jpg",
|
||||
"goods_name": "39英寸64位24核安卓智能平板液晶电视（黑色）",
|
||||
"store_id": 1,
|
||||
"store_name": "官方自营店铺",
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
|
||||
},
|
||||
{
|
||||
"goods_id": 28,
|
||||
"goodsbrowse_time": "2020-06-23 17:07:45",
|
||||
"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092202022516767.jpg",
|
||||
"goods_name": "南极人(NanJiren)纯棉床单四件套全棉床上用品婚庆被套4件套",
|
||||
"store_id": 1,
|
||||
"store_name": "官方自营店铺",
|
||||
"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
|
||||
}
|
||||
],
|
||||
page: 1, // 默认1
|
||||
loadStatus: 'loadmore',
|
||||
timer: true,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getBrowseList();
|
||||
},
|
||||
methods: {
|
||||
getBrowseList () {
|
||||
this.$u.api.getBrowseList().then(res => {
|
||||
if(res.errCode == 0) {
|
||||
this.historyList = res.data.storeInfo;
|
||||
async getBrowseList () {
|
||||
const res = await this.$u.api.getBrowseList({ page: this.page });
|
||||
this.timer = false;
|
||||
if(res.errCode == 0) {
|
||||
this.historyList = res.data.storeInfo;
|
||||
}
|
||||
return res.data.storeInfo.length;
|
||||
},
|
||||
reachBottom() {
|
||||
if(!this.timer) return false;
|
||||
this.loadStatus = "loading";
|
||||
this.page++;
|
||||
this.getBrowseList({page: this.page}).then(length => {
|
||||
if(length == 0) {
|
||||
this.page--;
|
||||
this.status = 'nomore';
|
||||
} else {
|
||||
this.status = 'loading';
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loadStatus = "nomore";
|
||||
this.page--;
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -46,50 +165,56 @@ export default {
|
||||
min-height: calc(100vh - var(--window-top));
|
||||
background: #ECECEC;
|
||||
.history-box {
|
||||
height: calc(100vh - var(--window-top));
|
||||
padding: 20rpx 30rpx 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.history-item {
|
||||
width: 220rpx;
|
||||
height: 290rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx 20rpx 22rpx;
|
||||
margin: 0 10rpx 20rpx 0;
|
||||
.item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 19rpx;
|
||||
}
|
||||
> view {
|
||||
font-size: 24rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
.item-image {
|
||||
margin: 20rpx 0 17rpx;
|
||||
width: 180rpx;
|
||||
height: 140rpx;
|
||||
.item-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.history-item {
|
||||
width: 220rpx;
|
||||
height: 290rpx;
|
||||
background: rgba(255,255,255,1);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.item-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.info-name {
|
||||
font-size: 22rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
padding: 20rpx 20rpx 22rpx;
|
||||
margin: 0 10rpx 20rpx 0;
|
||||
.item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 19rpx;
|
||||
}
|
||||
> view {
|
||||
font-size: 24rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
}
|
||||
> image {
|
||||
width: 37rpx;
|
||||
height: 8rpx;
|
||||
.item-image {
|
||||
margin: 20rpx 0 17rpx;
|
||||
width: 180rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.item-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.info-name {
|
||||
margin-right: 10rpx;
|
||||
flex: 1;
|
||||
font-size: 22rpx;
|
||||
color: rgba(51,51,51,1);
|
||||
}
|
||||
> image {
|
||||
width: 37rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
40
pages.json
40
pages.json
@ -329,6 +329,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "tool/MineCoupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠券",
|
||||
"app-plus": {
|
||||
"titleSize": "36px",
|
||||
"titleNView": {
|
||||
"titleColor": "#333333",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "more/MineHelp",
|
||||
"style": {
|
||||
@ -474,6 +487,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine/MineProgress",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预计进度",
|
||||
"app-plus": {
|
||||
"titleSize": "36px",
|
||||
"titleNView": {
|
||||
"titleColor": "#333333",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "tool/Manicure",
|
||||
"style": {
|
||||
@ -619,9 +645,16 @@
|
||||
"app-plus": {
|
||||
"titleSize": "36px",
|
||||
"titleNView": {
|
||||
"autoBackButton": false,
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"titleColor": "#333333",
|
||||
"buttons": [
|
||||
{
|
||||
"type":"none",
|
||||
"text":"取消",
|
||||
"float":"left",
|
||||
"fontSize":"14"
|
||||
},
|
||||
{
|
||||
"type":"none",
|
||||
"text":"\ue62d",
|
||||
@ -629,11 +662,7 @@
|
||||
"fontSrc": "/static/fonts/customer.ttf",
|
||||
"fontSize":"20"
|
||||
}
|
||||
],
|
||||
"autoBackButton": true,
|
||||
"backButton": {
|
||||
"badgeText": "取消"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -645,6 +674,7 @@
|
||||
"app-plus": {
|
||||
"titleSize": "36px",
|
||||
"titleNView": {
|
||||
"autoBackButton": false,
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"titleColor": "#333333",
|
||||
"buttons": [
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<view class="mine">
|
||||
<view class="mine-top">
|
||||
<view class="top">
|
||||
<image src="/static/image/mine/23.png" class="avatar" @click="toOtherPage('/mine/MineInfo')" />
|
||||
<u-avatar :src="userInfo.member_avatar" :size="110"></u-avatar>
|
||||
<view class="user-info">
|
||||
<view class="info-left">
|
||||
<view class="user-nickname" @click="toOtherPage('/mine/MineInfo')">{{ userInfo.member_nickname }}</view>
|
||||
@ -13,14 +13,14 @@
|
||||
</view>
|
||||
<view class="info-right">
|
||||
<view class="info-phone">{{ userInfo.member_mobile | phoneFormat }}</view>
|
||||
<view class="user-rank">等级:{{ userInfo.level }}级</view>
|
||||
<view class="user-rank">等级:{{ userInfo.member_level }}级</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-service" @click="toOtherPage('/mine/MemberServe')">会员服务</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view @click="toOtherPage('/mine/GoodsCollection')">
|
||||
<view>{{ userInfo.member_fav_goods_num }}</view>
|
||||
<view>{{ userInfo.member_fav_goods_num || 0 }}</view>
|
||||
<view>商品收藏</view>
|
||||
</view>
|
||||
<view @click="toOtherPage('/mine/StoreCollection')">
|
||||
@ -32,7 +32,7 @@
|
||||
<view>图文收藏</view>
|
||||
</view>
|
||||
<view @click="toOtherPage('/mine/Integral')">
|
||||
<view>{{ userInfo.member_points }}</view>
|
||||
<view>{{ userInfo ? userInfo.member_points : 0 }}</view>
|
||||
<view>积分数</view>
|
||||
</view>
|
||||
<view @click="toOtherPage('/mine/MineConcerns')">
|
||||
@ -92,6 +92,10 @@
|
||||
<img src="/static/image/mine/18.png" />
|
||||
<view>足迹</view>
|
||||
</view>
|
||||
<view @click="toOtherPage('/tool/MineCoupon')">
|
||||
<img src="/static/image/mine/25.png" />
|
||||
<view>优惠券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-tool">
|
||||
@ -131,7 +135,7 @@ export default {
|
||||
return value ? value.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2') : '';
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
onShow() {
|
||||
this.getUserInfo();
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
@ -166,15 +170,8 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
.avatar {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(251,251,251,1);
|
||||
margin-right: 30rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.user-info {
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
.info-left {
|
||||
margin-right: 15rpx;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 779 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 830 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 822 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 843 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 817 B |
Binary file not shown.
|
Before Width: | Height: | Size: 844 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 822 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 650 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 815 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 719 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user