parent
1dbc0c1249
commit
55479046ed
@ -1,553 +0,0 @@ |
||||
<template> |
||||
<view |
||||
class="data-list-components " |
||||
@touchmove.stop.prevent |
||||
> |
||||
<!-- :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }" --> |
||||
<!-- :style="[dataListStyle]" --> |
||||
<scroll-view |
||||
class="scroll-view" |
||||
:scroll-top="scrollTop" |
||||
:scroll-y="scrollingEnabled" |
||||
:lower-threshold="lowerThreshold" |
||||
:enable-back-to-top="enableBackToTop" |
||||
@scroll="handleScroll" |
||||
@scrolltolower="handleScrolltolower" |
||||
@touchstart="handleTouchStart" |
||||
@touchmove="handleTouchMove" |
||||
@touchend="handleTouchEnd" |
||||
> |
||||
<view class="scroll-content" :style="[scrollContentStyle]"> |
||||
<!-- 下拉 --> |
||||
<view class="pull-down-view"> |
||||
<slot name="refresh" v-if="$slots.refresh"></slot> |
||||
<view class="refresh-view" v-else> |
||||
<text :class="' pull-down-text icon-ymt '+(refreshStatus == 'soon'?' to-blod-down ':refreshStatus == 'sure'?' to-blod-up ':' ') " >{{ refreshText[refreshStatus] }}</text> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="scroll-list"><slot></slot></view> |
||||
|
||||
<view class="loading-view" v-if="loadingMask"> |
||||
<view class="loading-animation"></view> |
||||
<text class="loading-text">加载中...</text> |
||||
</view> |
||||
|
||||
<!-- 空 --> |
||||
<view class=" empty-content" v-if="showEmpty"> |
||||
<!-- <image class="empty-image" :src="emptyImage || defaultEmptyImage" mode=""></image> --> |
||||
<text class="empty-text">{{ emptyText }}</text> |
||||
</view> |
||||
|
||||
<!-- 底部上滑 --> |
||||
<view class="pull-up-view" > |
||||
<slot name="load" v-if="$slots.load"></slot> |
||||
<view class="load-view" v-else> |
||||
<view class="loading-animation" v-if="loadStatus == 'loading'"></view> |
||||
<text :class="' loading-text icon-ymt '+(loadStatus == 'soon'?' to-blod-up ':loadStatus == 'sure'?' to-blod-down ':' ') " >{{ loadText[loadStatus] }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
/** |
||||
* data-list 数据列表 |
||||
* @description 数据列表展示，上拉加载更多数据，下拉刷新数据 |
||||
* @tips 如果父组件有设置padding，可能造成组件高度不正确的问题 |
||||
* @property {Number, String} page 默认分页 |
||||
* @property {Number, String} size 默认分页大小 |
||||
* @property {Boolean} loading 是否显示首次加载时的loading遮罩层 |
||||
* @property {Boolean} safeAreaInsetBottom 是否开启底部安全区域适配 |
||||
* @property {String} emptyImage 空数据提示图片 |
||||
* @property {String} emptyText 空数据提示文字 |
||||
* @property {Boolean} enableBackToTop iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部 |
||||
* @property {Number, String} refresherThreshold 下拉刷新阈值（单位px），触发 refresherrefresh 事件 |
||||
* @property {Number, String} lowerThreshold 距底部多远时（单位px），触发 scrolltolower 事件 |
||||
* @methods {Function} loadData 加载数据方法 |
||||
* @methods {Function} refreshData 刷新数据方法 |
||||
* @methods {Function} computedHeight 重新计算高度方法（有时候页面某些地方布局被改变了，会造成组件高度不能撑满的问题，就调用此方法） |
||||
* @event {Function} load 加载 事件（参数一：分页请求参数，参数二：回调方法，需要将列表和数据总数回调回去计算 {list:数据列表对象,total:后端数据总数}） |
||||
* @event {Function} refresh 刷新 事件（参数一：分页请求参数，参数二：回调方法，需要将列表和数据总数回调回去计算 {list:数据列表对象,total:后端数据总数}） |
||||
* @event {Function} scroll 滚动 事件 |
||||
* @event {Function} scrolltolower 上拉触底 事件 |
||||
* @event {Function} refresherpulling 正在下拉 事件 |
||||
* @event {Function} refresherrestore 下拉刷新被复位 事件 |
||||
* @event {Function} refresherabort 下拉刷新被终止 事件 |
||||
* @event {Function} refresherrefresh 下拉刷新被触发 事件 |
||||
* @example <data-list class="data-list" ref="list" @load="handleLoad" @refresh="handleRefresh" @scroll="handleScroll"></data-list> |
||||
*/ |
||||
import emptyImages from './emptyImage.js'; |
||||
export default { |
||||
name: 'data-list', |
||||
props: { |
||||
page: { |
||||
type: [Number, String], |
||||
default: 1 |
||||
}, |
||||
size: { |
||||
type: [Number, String], |
||||
default: 15 |
||||
}, |
||||
loading: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
safeAreaInsetBottom: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
emptyImage: { |
||||
type: String |
||||
}, |
||||
emptyText: { |
||||
type: String, |
||||
default: '暂无数据~' |
||||
}, |
||||
enableBackToTop: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
showEmpty:{ |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
refresherThreshold: { |
||||
type: [Number, String], |
||||
default: 50 |
||||
}, |
||||
lowerThreshold: { |
||||
type: [Number, String], |
||||
default: 50 |
||||
}, |
||||
selectObject:{ |
||||
type:Object, |
||||
default:{ |
||||
selectIndex:0, |
||||
length:0 |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
list: [], // 数据列表 |
||||
total: -1, // 数据总数 |
||||
currentPage: 1, // 当前分页页码 |
||||
currentSize: 10, // 当前分页大小 |
||||
// showEmpty: false, // 是否显示空数据 |
||||
waiting: false, // 是否等待加载中 |
||||
loadingMask: false, // 是否显示加载中遮罩 |
||||
scrollTop: 0, // 设置竖向滚动条位置 |
||||
currentScrollTop: 0, // 当前竖向滚动条位置 |
||||
scrollingEnabled: true, // 是否启用竖向滚动 |
||||
|
||||
pullingDown: false, // 是否正在下拉 |
||||
pullDownHeight: 0, // 下拉高度 |
||||
pullDownTimeStamp: 0, // 下拉时的时间戳 |
||||
|
||||
pullingUp: false, // 是否正在上拉 |
||||
pullUpHeight: 0, // 上拉高度 |
||||
pullUpTimeStamp: 0, // 上拉时的时间戳 |
||||
|
||||
maxDistance:100, |
||||
touchDirection:'top', |
||||
|
||||
loadStatus: 'soon', |
||||
loadText: { |
||||
loading: '加载中~', |
||||
nomore: '没有更多啦~', |
||||
|
||||
soon: '上滑查看下一分类', |
||||
sure: '释放查看下一分类', |
||||
}, |
||||
refreshStatus: 'soon', |
||||
refreshText: { |
||||
soon: '下滑查看上一分类', |
||||
sure: '释放查看上一分类', |
||||
|
||||
nomore: '没有更多啦~', |
||||
refreshing: '正在刷新中~' |
||||
}, |
||||
defaultEmptyImage: emptyImages.data, |
||||
componentsHeight: 'auto' // 组件高度属性 |
||||
}; |
||||
}, |
||||
watch:{ |
||||
selectObject:{ |
||||
handler(n, o) { |
||||
if(n.selectIndex == n.length-1){ |
||||
this.loadStatus = "nomore" |
||||
}else{ |
||||
this.loadStatus = "soon" |
||||
} |
||||
if(n.selectIndex == 0){ |
||||
this.refreshStatus = "nomore" |
||||
}else{ |
||||
this.refreshStatus = "soon" |
||||
} |
||||
|
||||
}, |
||||
deep:true, // 深度监听 |
||||
immediate:false, // 初始化监听 |
||||
}, |
||||
|
||||
}, |
||||
computed: { |
||||
// dataListStyle() { |
||||
// const { componentsHeight } = this; |
||||
// return { |
||||
// height: componentsHeight |
||||
// }; |
||||
// }, |
||||
scrollContentStyle() { |
||||
const style = {}; |
||||
const { pullDownHeight, pullingDown,pullUpHeight, pullingUp } = this; |
||||
|
||||
// if(this.touchDirection == 'top'){ |
||||
|
||||
style.transform = pullingDown ? `translateY(${pullDownHeight}px)` : `translateY(0px)`; |
||||
style.transition = pullingDown ? `transform .1s linear` : `transform 0.3s cubic-bezier(0.19,1.64,0.42,0.72)`; |
||||
|
||||
|
||||
// }else if(this.touchDirection == 'bottom'){ |
||||
// style.transform = pullingUp ? `translateY(0px)` : `translateY(0px)`; |
||||
|
||||
|
||||
// style.transition = pullingUp ? `transform .1s linear` : `transform 0.3s cubic-bezier(0.19,1.64,0.42,0.72)`; |
||||
// } |
||||
|
||||
return style; |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.handleInit(); |
||||
}, |
||||
methods: { |
||||
// 下滑触底后 数据加载 |
||||
loadData() { |
||||
this.waiting = true; |
||||
|
||||
this.$emit('load',res => { |
||||
this.waiting = false; |
||||
this.list = res.list; |
||||
this.total = res.total; |
||||
this.currentPage++; |
||||
this.handleComputeData(); |
||||
// this.computedHeight(); |
||||
}); |
||||
}, |
||||
|
||||
// 计算高度 |
||||
computedHeight() { |
||||
// this.getRect('.data-list-components').then(res => { |
||||
// console.log(res,"res") |
||||
// // #ifdef H5 |
||||
// this.componentsHeight = `calc(100vh - ${res.top}px - var(--window-top))`; |
||||
// // #endif |
||||
// // #ifndef H5 |
||||
// this.componentsHeight = `calc(100vh - ${res.top}px)`; |
||||
// // #endif |
||||
|
||||
// }); |
||||
}, |
||||
// 计算数据 |
||||
handleComputeData() { |
||||
const len = this.list.length; |
||||
const total = this.total; |
||||
console.log(len,total) |
||||
if (len >= this.total) { |
||||
this.loadStatus = 'soon'; |
||||
} else if (len < this.total) { |
||||
this.loadStatus = 'loading'; |
||||
} |
||||
}, |
||||
// 下滑触底事件 |
||||
handleScrolltolower(e) { |
||||
this.$emit('scrolltolower', e); |
||||
if (this.loadStatus == 'nomore' || this.waiting) return; |
||||
this.loadData(); |
||||
}, |
||||
// 滚动事件 |
||||
handleScroll(e) { |
||||
// this.currentScrollTop = e.detail.scrollTop; |
||||
|
||||
// if (e.detail.scrollTop <= 20) { |
||||
// this.touchDirection = 'top'; |
||||
// } else { |
||||
// this.touchDirection = 'bottom'; |
||||
// } |
||||
// console.log(e.detail.scrollTop) |
||||
this.$emit('scroll', e); |
||||
}, |
||||
// 触摸按下处理 |
||||
handleTouchStart(e) { |
||||
|
||||
// if (e.detail.scrollTop <= 20) { |
||||
|
||||
// } |
||||
// console.log(e) |
||||
|
||||
|
||||
// if(this.touchDirection=='top'){ |
||||
this.pullingDown = true; |
||||
// }else if(this.touchDirection=='bottom'){ |
||||
// this.pullingUp =true; |
||||
// } |
||||
|
||||
this.currentTouchStartY = e.touches[0].clientY; |
||||
}, |
||||
// 触摸按下滑动处理 |
||||
handleTouchMove(e) { |
||||
|
||||
// this.$emit('refresherpulling', e); |
||||
// 顶部下滑 |
||||
console.log(e.touches[0].clientY >= this.currentTouchStartY) |
||||
if (e.touches[0].clientY >= this.currentTouchStartY){ |
||||
this.touchDirection=='top' |
||||
const currentTouchMoveY = e.touches[0].clientY; |
||||
let movingDistance = (currentTouchMoveY - this.currentTouchStartY) ; |
||||
if(this.selectObject.selectIndex == 0){ |
||||
this.refreshStatus = 'nomore' |
||||
} |
||||
else if(movingDistance > this.refresherThreshold){ |
||||
this.refreshStatus = 'sure';// 释放 |
||||
}else{ |
||||
this.refreshStatus = 'soon';// 划 |
||||
} |
||||
let computeDistance = movingDistance; |
||||
if(computeDistance > this.maxDistance){ |
||||
computeDistance = this.maxDistance; |
||||
} |
||||
this.pullDownHeight = computeDistance ; |
||||
}else{ |
||||
// 底部上滑 |
||||
this.touchDirection=='bottom'; |
||||
const currentTouchMoveY = e.touches[0].clientY; |
||||
let movingDistance = (this.currentTouchStartY - currentTouchMoveY ) ; |
||||
if(this.selectObject.selectIndex == this.selectObject.length-1){ |
||||
this.loadStatus = 'nomore'; |
||||
}else if (movingDistance >= this.lowerThreshold) { |
||||
this.loadStatus = 'sure';//释放 |
||||
|
||||
} else { |
||||
this.loadStatus = 'soon';//划 |
||||
|
||||
} |
||||
let computeDistance = movingDistance; |
||||
if(computeDistance > this.maxDistance){ |
||||
computeDistance = this.maxDistance; |
||||
} |
||||
this.pullUpHeight = computeDistance; |
||||
|
||||
} |
||||
|
||||
|
||||
}, |
||||
// 触摸松开处理 |
||||
handleTouchEnd(e) { |
||||
console.log(this.touchDirection) |
||||
// 顶部下滑 |
||||
if(this.touchDirection == 'top'){ |
||||
if(this.pullDownHeight>=this.refresherThreshold&&this.selectObject.selectIndex > 0){ |
||||
this.$emit('refresherrefresh', "prev"); |
||||
} |
||||
this.pullingDown = false; |
||||
this.pullDownHeight = 0; |
||||
// 底部上滑 |
||||
}else if(this.touchDirection == 'bottom'){ |
||||
|
||||
if(this.pullUpHeight>=this.lowerThreshold&&this.selectObject.selectIndex < (this.selectObject.length-1)){ |
||||
this.$emit('refresherrefresh', "next"); |
||||
|
||||
} |
||||
this.pullingUp = false; |
||||
this.pullUpHeight = 0; |
||||
} |
||||
}, |
||||
// 初始化 |
||||
handleInit() { |
||||
this.currentPage = this.page; |
||||
this.currentSize = this.size; |
||||
// console.log() |
||||
// this.computedHeight(); |
||||
}, |
||||
// 查询dom节点信息 |
||||
getRect(selector, all) { |
||||
return new Promise(resolve => { |
||||
uni.createSelectorQuery() |
||||
.in(this) |
||||
[all ? 'selectAll' : 'select'](selector) |
||||
.boundingClientRect(rect => { |
||||
if (all && Array.isArray(rect) && rect.length) { |
||||
resolve(rect); |
||||
} |
||||
if (!all && rect) { |
||||
resolve(rect); |
||||
} |
||||
}) |
||||
.exec(); |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.data-list-components { |
||||
height: 100%; |
||||
.scroll-view { |
||||
height: 100%; |
||||
.scroll-content { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
.empty-view { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
} |
||||
.empty-content { |
||||
height:calc(100% - 20px) ; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
.empty-image { |
||||
width: 100%; |
||||
// height: 100%; |
||||
} |
||||
.empty-text { |
||||
|
||||
display: block; |
||||
color: #606266; |
||||
margin-top: 20rpx; |
||||
} |
||||
} |
||||
.pull-down-view { |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 30rpx 0; |
||||
display: flex; |
||||
position: absolute; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
transform: translateY(-100%); |
||||
.refresh-view { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
.loading-animation { |
||||
width: 50rpx; |
||||
height: 50rpx; |
||||
} |
||||
.pull-down-text { |
||||
color: #606266; |
||||
font-size: 24rpx; |
||||
margin-top: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
.scroll-list { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.loading-view { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
.loading-animation { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
} |
||||
.loading-text { |
||||
color: #606266; |
||||
font-size: 24rpx; |
||||
margin-top: 10rpx; |
||||
} |
||||
} |
||||
.pull-up-view { |
||||
width: 100%; |
||||
// padding: 15rpx 0; |
||||
height: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.load-view { |
||||
display: flex; |
||||
align-items: center; |
||||
// .loading-animation { |
||||
// width: 30rpx; |
||||
// height: 30rpx; |
||||
// } |
||||
.loading-text { |
||||
color: #606266; |
||||
font-size: 24rpx; |
||||
margin-left: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
.loading-animation { |
||||
position: relative; |
||||
&::after, |
||||
&::before { |
||||
left: 0; |
||||
width: 100%; |
||||
position: absolute; |
||||
border: 0 solid currentColor; |
||||
background-color: #b7b7b7; |
||||
} |
||||
&::after { |
||||
content: ''; |
||||
top: -25%; |
||||
z-index: 1; |
||||
height: 100%; |
||||
border-radius: 10%; |
||||
animation: spin 0.6s -0.1s linear infinite; |
||||
} |
||||
&::before { |
||||
content: ''; |
||||
bottom: -9%; |
||||
height: 10%; |
||||
background: #000; |
||||
border-radius: 50%; |
||||
opacity: 0.2; |
||||
animation: shadow 0.6s -0.1s linear infinite; |
||||
} |
||||
@keyframes spin { |
||||
17% { |
||||
border-bottom-right-radius: 10%; |
||||
} |
||||
25% { |
||||
transform: translateY(25%) rotate(22.5deg); |
||||
} |
||||
50% { |
||||
border-bottom-right-radius: 100%; |
||||
transform: translateY(50%) scale(1, 0.9) rotate(45deg); |
||||
} |
||||
75% { |
||||
transform: translateY(25%) rotate(67.5deg); |
||||
} |
||||
100% { |
||||
transform: translateY(0) rotate(90deg); |
||||
} |
||||
} |
||||
@keyframes shadow { |
||||
50% { |
||||
transform: scale(1.25, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because one or more lines are too long
@ -1,350 +0,0 @@ |
||||
<template> |
||||
<view class="container"> |
||||
|
||||
<view class='addAddress'> |
||||
<!-- <view class="pad30"> |
||||
<view class='default acea-row row-middle borderRadius15'> |
||||
<input v-model="addressValue" type="text" placeholder="粘贴地址信息，自动拆分姓名、电话和地址" |
||||
placeholder-class='placeholder' style="width:100%;" |
||||
@blur="identify()"> |
||||
</view> |
||||
</view> --> |
||||
<view class="pad30 mt-22"> |
||||
<view class='list borderRadius15'> |
||||
<uni-forms ref="form" label-position="left" :modelValue="userAddress"> |
||||
<uni-forms-item label="姓名" name="real_name" class='item acea-row row-between-wrapper'> |
||||
|
||||
<input type='text' placeholder='请输入姓名' name='real_name' :value="userAddress.real_name" |
||||
placeholder-class='placeholder' class="width100"></input> |
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="联系电话" name="phone" class='item acea-row row-between-wrapper'> |
||||
|
||||
<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone' |
||||
placeholder-class='placeholder' pattern="\d*"></input> |
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="所在地区" name="region" class='item acea-row row-between-wrapper'> |
||||
|
||||
<view class="address acea-row row-between height100" @click="chooseAddress"> |
||||
<input type='text' placeholder='请选择地址' :disabled="true" name='region' placeholder-class='placeholder' |
||||
v-model='userAddress.region' class="detail"></input> |
||||
<view class="icon-ymt to-right font14 fcor666"> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="详细地址" name="detail" class='item acea-row row-between-wrapper'> |
||||
|
||||
|
||||
<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder' |
||||
v-model='userAddress.detail' class="detail"></input> |
||||
|
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
</view> |
||||
</view> |
||||
<button class='keepBnt bg-color' @click="formSubmit">立即保存</button> |
||||
</view> |
||||
|
||||
|
||||
|
||||
<AddressPicker ref="AddressPicker" @getAddress="getAddress"></AddressPicker> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue' |
||||
import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue' |
||||
|
||||
import AddressPicker from '@/pages/address/addNewAddress/addressPicker.vue' |
||||
let dataList = require('./address.json') |
||||
export default { |
||||
data() { |
||||
return { |
||||
userAddress: { |
||||
real_name:"", |
||||
phone:"", |
||||
region:"", |
||||
detail:"", |
||||
}, //地址详情 |
||||
addressValue:"", |
||||
addressId:null, |
||||
/* rulesObject:{ |
||||
real_name:{ |
||||
rules:[ |
||||
// 校验 name 不能为空 |
||||
{ |
||||
required: true, |
||||
errorMessage: '请填写姓名', |
||||
}, |
||||
// 对name字段进行长度验证 |
||||
{ |
||||
minLength: 2, |
||||
maxLength: 5, |
||||
errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符', |
||||
} |
||||
], |
||||
}, |
||||
phone:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请输入手机号', |
||||
}, |
||||
{ |
||||
validateFunction: function(rule, value, data, callback) { |
||||
let iphoneReg = /^1[0-9]{10}$/ |
||||
if (!iphoneReg.test(value)) { |
||||
callback('手机号码格式不正确，请重新填写') |
||||
} |
||||
return true |
||||
} |
||||
} |
||||
|
||||
], |
||||
}, |
||||
region:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请选择地址', |
||||
}, |
||||
|
||||
], |
||||
}, |
||||
detail:{ |
||||
rules:[ |
||||
{ |
||||
required: true, |
||||
errorMessage: '请填写详细地址', |
||||
}, |
||||
{ |
||||
minLength: 5, |
||||
|
||||
errorMessage: '{label}长度不能少于{minLength}个字符', |
||||
} |
||||
|
||||
], |
||||
}, |
||||
|
||||
} |
||||
*/ |
||||
|
||||
} |
||||
}, |
||||
components:{ |
||||
AddressPicker, |
||||
"uni-forms":uniForms, |
||||
"uni-forms-item":uniFormsItem |
||||
// uniForms, |
||||
// uniFormsItem |
||||
}, |
||||
onReady() { |
||||
// 需要在onReady中设置规则 |
||||
// this.$refs.form.setRules(this.rulesObject) |
||||
|
||||
// if(this.addressId){ |
||||
// uni.setNavigationBarTitle({ |
||||
// title: '编辑地址' |
||||
// }); |
||||
// } |
||||
}, |
||||
onLoad(options){ |
||||
|
||||
if(options.id){ |
||||
this.addressId = options.id |
||||
uni.setNavigationBarTitle({ |
||||
title: '编辑地址' |
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
identify(){ |
||||
const options = { |
||||
type: 0, // 哪种方式解析，0：正则，1：树查找 |
||||
textFilter: [], // 预清洗的字段 |
||||
nameMaxLength: 4, // 查找最大的中文名字长度 |
||||
} |
||||
// type参数0表示使用正则解析，1表示采用树查找, textFilter地址预清洗过滤字段。 |
||||
// if(!!this.addressValue){ |
||||
// const parseResult = AddressParse(this.addressValue, options) |
||||
// // console.log(parseResult); |
||||
// this.userAddress.real_name = parseResult.name; |
||||
// this.userAddress.phone = parseResult.phone; |
||||
// this.userAddress.detail = parseResult.detail; |
||||
// this.userAddress.region = parseResult.province + '/' + parseResult.city + '/' + parseResult.area; |
||||
// } |
||||
}, |
||||
|
||||
formSubmit(form) { |
||||
|
||||
// 暂时不起作用 |
||||
|
||||
// this.$refs.form.validate().then(res => { |
||||
// console.log('success', res); |
||||
// uni.showToast({ |
||||
// title: `校验通过` |
||||
// }) |
||||
// }).catch(err => { |
||||
// console.log('err', err); |
||||
// }) |
||||
|
||||
let _this = this; |
||||
|
||||
this.$refs.form.validate().then(res=>{ |
||||
console.log(_this.userAddress,res) |
||||
}) |
||||
|
||||
}, |
||||
chooseAddress(){ |
||||
this.$refs.AddressPicker.show() |
||||
}, |
||||
getAddress(address){ |
||||
console.log(address,"address") |
||||
this.userAddress.region=address |
||||
} |
||||
|
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.container{ |
||||
background-color: #f5f5f5; |
||||
height: 100vh; |
||||
box-sizing: border-box; |
||||
padding-top:30rpx; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item__label .label-text{ |
||||
font-size: 30rpx !important; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item{ |
||||
width: 100% !important; |
||||
} |
||||
|
||||
.pad30 { |
||||
padding: 0 30rpx |
||||
} |
||||
|
||||
|
||||
|
||||
.acea-row { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.row-middle { |
||||
align-items: center |
||||
} |
||||
.row-between-wrapper { |
||||
align-items: center; |
||||
justify-content: space-between |
||||
} |
||||
.borderRadius15 { |
||||
border-radius: 15rpx !important; |
||||
} |
||||
|
||||
.addAddress .list { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.addAddress .list .item { |
||||
padding: 30rpx ; |
||||
padding-bottom: 0; |
||||
border-top: 1rpx solid #eee; |
||||
position: relative; |
||||
} |
||||
|
||||
.addAddress .list .item .detail{ |
||||
// width: 368rpx; |
||||
} |
||||
|
||||
.addAddress .list .item .location{ |
||||
position: absolute; |
||||
right: 46rpx; |
||||
top: 50%; |
||||
margin-top: -40rpx!important; |
||||
font-size: 24rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
|
||||
|
||||
.addAddress .list .item .name { |
||||
width: 195rpx; |
||||
font-size: 30rpx; |
||||
color: #333; |
||||
} |
||||
|
||||
.addAddress .list .item .address { |
||||
flex: 1; |
||||
} |
||||
|
||||
.addAddress .list .item .address .addressCon{ |
||||
width: 360rpx; |
||||
} |
||||
|
||||
.addAddress .list .item .address .addressCon .tip{ |
||||
font-size: 21rpx; |
||||
margin-top: 4rpx; |
||||
} |
||||
|
||||
.addAddress .list .item input { |
||||
// width: 475rpx; |
||||
flex: 1; |
||||
font-size: 30rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
height: 100%; |
||||
} |
||||
|
||||
.placeholder { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.addAddress .list .item .picker { |
||||
width: 430rpx; |
||||
font-size: 30rpx; |
||||
} |
||||
|
||||
|
||||
|
||||
.addAddress .default { |
||||
padding: 0 30rpx; |
||||
height: 90rpx; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
|
||||
|
||||
.addAddress .keepBnt { |
||||
width: 690rpx; |
||||
height: 86rpx; |
||||
border-radius: 50rpx; |
||||
text-align: center; |
||||
line-height: 86rpx; |
||||
margin: 50rpx auto; |
||||
font-size: 32rpx; |
||||
color: #fff; |
||||
} |
||||
|
||||
|
||||
.mt-22{ |
||||
margin-top: 22rpx; |
||||
} |
||||
.bg-color { |
||||
background-color: #dd524d; |
||||
} |
||||
|
||||
|
||||
|
||||
</style> |
||||
@ -1,46 +0,0 @@ |
||||
|
||||
{ |
||||
"id": "2", |
||||
"realstore_id": "0", |
||||
"realstore_goods_id": "0", |
||||
"shop_id": "1", |
||||
"shop_user_id": "1", |
||||
"shop_category_id": "1", |
||||
"shop_settle_price": "0.00", |
||||
"shop_settle_rate": "0.00", |
||||
"brand_id": "2", |
||||
"site_type": "-1", |
||||
"title": "苹果（Apple）iPhone 6 Plus (A1524)移动联通电信4G手机 金色 16G", |
||||
"title_color": "", |
||||
"simple_desc": "1.芯片功能强大 iPhone芯片的更新频率比友商少,但每次iPhone芯片更新时,都会成为关注和追赶的对象。", |
||||
"model": "iPhone 6 Plus", |
||||
"place_origin": "0", |
||||
"inventory": "7983", |
||||
"inventory_unit": "步", |
||||
"images": ["https://gw.alicdn.com/bao/uploaded/i2/708446530/O1CN01WZY06s1y6mybMkFwh_!!708446530.jpg_300x300q90.jpg_.webp","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"], |
||||
"original_price": "4500.00-6800.00", |
||||
"min_original_price": "4500.00", |
||||
"max_original_price": "6800.00", |
||||
"price": "4500.00-6800.00", |
||||
"min_price": "4500.00", |
||||
"max_price": "6800.00", |
||||
"give_integral": "30", |
||||
"buy_min_number": "1", |
||||
"buy_max_number": "0", |
||||
"is_deduction_inventory": "1", |
||||
"is_shelves": "1", |
||||
"content_web": "<p style=\"margin:0;\"><a href=\"https://store.shopxo.net/\" target=\"_blank\" title=\"进入指定页面>>\">进入指定页面>></a></p><p style=\"margin:0;\"><video class=\"edui-faked-video video-js\" controls=\"\" preload=\"none\" width=\"420\" height=\"280\" src=\"https://d1.shopxo.vip/static/upload/video/goods/2019/01/14/1547458876723311.mp4\" data-setup=\"{}\"></video></p><p style=\"margin:0;\"><a href=\"https://shopxo.net/?q=test&u=hello你好！\" target=\"_blank\" title=\"打开一个a标签地址\"><strong><span style=\"font-size: 24px; color: rgb(255, 0, 0);\">打开一个a标签地址</span></strong></a><br/></p><p style=\"margin:0;\"><a href=\"/pages/plugins/blog/index/index\" target=\"_self\" title=\"进入博客页面\">进入博客</a></p><p style=\"margin:0;\"><img style=\"max-width:100%;height:auto;margin:0;padding:0;display:block;\" src=\"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451595700972.jpg\" title=\"1547451595700972.jpg\"/></p><p style=\"margin:0;\"><img style=\"max-width:100%;height:auto;margin:0;padding:0;display:block;\" src=\"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451595528800.jpg\" title=\"1547451595528800.jpg\"/></p><p style=\"margin:0;\"><img style=\"max-width:100%;height:auto;margin:0;padding:0;display:block;\" src=\"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451595616298.jpg\" title=\"1547451595616298.jpg\"/></p><p style=\"margin:0;\"><br/></p>", |
||||
"photo_count": "2", |
||||
"sales_count": "266", |
||||
"access_count": "13333", |
||||
"is_exist_many_spec": "1", |
||||
"spec_base": "", |
||||
"plugins_membershiplevelvip_price_extends": "", |
||||
"seo_title": "", |
||||
"seo_keywords": "", |
||||
"seo_desc": "", |
||||
"is_delete_time": "0", |
||||
"add_time": "2019-01-14 15:40:24", |
||||
"upd_time": "2023-03-24 17:46:26" |
||||
|
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -1,46 +0,0 @@ |
||||
|
||||
{ |
||||
"id": "2", |
||||
"realstore_id": "0", |
||||
"realstore_goods_id": "0", |
||||
"shop_id": "1", |
||||
"shop_user_id": "1", |
||||
"shop_category_id": "1", |
||||
"shop_settle_price": "0.00", |
||||
"shop_settle_rate": "0.00", |
||||
"brand_id": "2", |
||||
"site_type": "-1", |
||||
"title": "苹果（Apple）iPhone 6 Plus (A1524)移动联通电信4G手机 金色 16G", |
||||
"title_color": "", |
||||
"simple_desc": "1.芯片功能强大 iPhone芯片的更新频率比友商少,但每次iPhone芯片更新时,都会成为关注和追赶的对象。", |
||||
"model": "iPhone 6 Plus", |
||||
"place_origin": "0", |
||||
"inventory": "7983", |
||||
"inventory_unit": "步", |
||||
"images": ["https://gw.alicdn.com/bao/uploaded/i2/2200817857369/O1CN013I5Mae24J3O6w9wOE_!!2-item_pic.png_300x300q90.jpg_.webp","https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg"], |
||||
"original_price": "4500.00-6800.00", |
||||
"min_original_price": "4500.00", |
||||
"max_original_price": "6800.00", |
||||
"price": "4500.00-6800.00", |
||||
"min_price": "4500.00", |
||||
"max_price": "6800.00", |
||||
"give_integral": "30", |
||||
"buy_min_number": "1", |
||||
"buy_max_number": "0", |
||||
"is_deduction_inventory": "1", |
||||
"is_shelves": "1", |
||||
"content_web": "<p style=\"margin:0;\"><a href=\"https://store.shopxo.net/\" target=\"_blank\" title=\"进入指定页面>>\">进入指定页面>></a></p><p style=\"margin:0;\"><video class=\"edui-faked-video video-js\" controls=\"\" preload=\"none\" width=\"420\" height=\"280\" src=\"https://d1.shopxo.vip/static/upload/video/goods/2019/01/14/1547458876723311.mp4\" data-setup=\"{}\"></video></p><p style=\"margin:0;\"><a href=\"https://shopxo.net/?q=test&u=hello你好！\" target=\"_blank\" title=\"打开一个a标签地址\"><strong><span style=\"font-size: 24px; color: rgb(255, 0, 0);\">打开一个a标签地址</span></strong></a><br/></p><p style=\"margin:0;\"><a href=\"/pages/plugins/blog/index/index\" target=\"_self\" title=\"进入博客页面\">进入博客</a></p><p style=\"margin:0;\"><img style=\"max-width:100%;height:auto;margin:0;padding:0;display:block;\" src=\"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451595700972.jpg\" title=\"1547451595700972.jpg\"/></p><p style=\"margin:0;\"><img style=\"max-width:100%;height:auto;margin:0;padding:0;display:block;\" src=\"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451595528800.jpg\" title=\"1547451595528800.jpg\"/></p><p style=\"margin:0;\"><img style=\"max-width:100%;height:auto;margin:0;padding:0;display:block;\" src=\"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451595616298.jpg\" title=\"1547451595616298.jpg\"/></p><p style=\"margin:0;\"><br/></p>", |
||||
"photo_count": "2", |
||||
"sales_count": "266", |
||||
"access_count": "13333", |
||||
"is_exist_many_spec": "1", |
||||
"spec_base": "", |
||||
"plugins_membershiplevelvip_price_extends": "", |
||||
"seo_title": "", |
||||
"seo_keywords": "", |
||||
"seo_desc": "", |
||||
"is_delete_time": "0", |
||||
"add_time": "2019-01-14 15:40:24", |
||||
"upd_time": "2023-03-24 17:46:26" |
||||
|
||||
} |
||||
@ -1,274 +1,365 @@ |
||||
<template> |
||||
|
||||
<!-- 选择类别 --> |
||||
<wybPopup ref="popup" @hide="hide" type="bottom" width="500" scrollY="true" radius="0" :showCloseIcon="true"> |
||||
<!-- 货品 --> |
||||
<view v-if="keywords == 'goods'" class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>商品列表</text></view> |
||||
<view class="pop-content"> |
||||
<view class="flex-row bottom-border pd15"> |
||||
<view class=""> |
||||
即时达 |
||||
</view> |
||||
<view class=""> |
||||
共16件 |
||||
</view> |
||||
<!-- 选择类别 --> |
||||
<wybPopup ref="popup" @hide="hide" type="bottom" width="500" scrollY="true" radius="0" :showCloseIcon="true"> |
||||
<!-- 货品 --> |
||||
<view v-if="keywords == 'goods'" class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>商品列表</text></view> |
||||
<view class="pop-content"> |
||||
<view class="flex-row bottom-border pd15"> |
||||
<view class=""> |
||||
数量 |
||||
</view> |
||||
<!-- 遍历商品 --> |
||||
<view v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" class="goods-pop bottom-border pd15"> |
||||
<view class=""> |
||||
<image class="st-img" :src="images" mode="aspectFill"></image> |
||||
<view class=""> |
||||
共{{getNumberAll}}件 |
||||
</view> |
||||
</view> |
||||
<!-- 遍历商品 --> |
||||
<view v-for="(item,index) in goodsList" :key="index" class="goods-pop bottom-border pd15"> |
||||
<view class=""> |
||||
<image class="st-img" v-if="item.img" :src="imageUrl + item.img" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="goods-flex1"> |
||||
<view class="marb10 font16"> |
||||
{{item.title}} |
||||
</view> |
||||
<view class="goods-flex1"> |
||||
<view class="marb10 font16"> |
||||
天友原味减糖活性乳酸菌饮品 300ml |
||||
</view> |
||||
<view class="flex-row"> |
||||
<view class="flex-row"> |
||||
<view class="dis-flex"> |
||||
<view class="fcorred"> |
||||
¥5.2 |
||||
¥{{item.price}} |
||||
</view> |
||||
<view class="fcor666"> |
||||
×1 |
||||
<view class="text-lt fcor666 margle10"> |
||||
¥{{item.originalPrice}} |
||||
</view> |
||||
</view> |
||||
<view class="fcor666"> |
||||
×{{item.num}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 运费 --> |
||||
<view v-if="keywords == 'freight'" class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>运费说明</text></view> |
||||
<view class="pop-content"> |
||||
<view class="flex-row pd10"> |
||||
<view class="font16"> |
||||
运费总计 |
||||
</view> |
||||
<view class=""> |
||||
¥0 |
||||
</view> |
||||
</view> |
||||
<!-- 运费 --> |
||||
<view v-if="keywords == 'freight'" class="pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>运费说明</text></view> |
||||
<view class="pop-content"> |
||||
<view class="flex-row pd10"> |
||||
<view class="font16"> |
||||
运费总计 |
||||
</view> |
||||
<view class="flex-row font14 color999 marb5"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费 |
||||
</view> |
||||
<view class=""> |
||||
¥6 |
||||
</view> |
||||
</view> |
||||
<view class="flex-row font14 color999"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费优惠 |
||||
</view> |
||||
<view class=""> |
||||
-¥6 |
||||
</view> |
||||
<view class=""> |
||||
¥{{postPriceAll}} |
||||
</view> |
||||
<view class="pd10"> |
||||
<view class="font15"> |
||||
基础运费 |
||||
</view> |
||||
</view> |
||||
<view class="flex-row font14 color999 marb5"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费 |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
基础运费6元 |
||||
<view class=""> |
||||
¥{{postPrice.freightPrice}} |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
不同城市、地区之间收费规则会略有不同。 |
||||
</view> |
||||
<view class="flex-row font14 color999"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费优惠 |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
运费优惠仅针对基础运费部分进行抵扣; |
||||
<view class="fcorred"> |
||||
商品金额满{{postPrice.freePostPrice}}元包邮 |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="font16 color999 mart10"> |
||||
不同城市、地区之间收费规则会略有不同。 |
||||
</view> |
||||
|
||||
</view> |
||||
<!-- 积分 --> |
||||
<view v-if="keywords == 'integral'" class="pop-contain pd-main"> |
||||
|
||||
<view class="pop-title fontwig6"><text>积分说明</text></view> |
||||
<view class="pop-content"> |
||||
<view class="flex-row pd10"> |
||||
<view class="font16"> |
||||
运费总计 |
||||
</view> |
||||
<view class=""> |
||||
¥0 |
||||
</view> |
||||
</view> |
||||
<!-- 积分 --> |
||||
<view v-if="keywords == 'integral'" class="pop-contain pd-main"> |
||||
|
||||
<view class="pop-title fontwig6"><text>积分说明</text></view> |
||||
<view class="pop-content"> |
||||
<view class="flex-row pd10"> |
||||
<view class="font16"> |
||||
运费总计 |
||||
</view> |
||||
<view class="flex-row font14 color999 marb5"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费 |
||||
</view> |
||||
<view class=""> |
||||
¥6 |
||||
</view> |
||||
<view class=""> |
||||
¥0 |
||||
</view> |
||||
<view class="flex-row font14 color999"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费优惠 |
||||
</view> |
||||
<view class=""> |
||||
-¥6 |
||||
</view> |
||||
</view> |
||||
<view class="flex-row font14 color999 marb5"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费 |
||||
</view> |
||||
<view class="pd10"> |
||||
<view class="font15"> |
||||
基础运费 |
||||
</view> |
||||
<view class=""> |
||||
¥6 |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
基础运费6元 |
||||
</view> |
||||
<view class="flex-row font14 color999"> |
||||
<view class=""> |
||||
<text class="font20 paddtright5">·</text>运费优惠 |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
不同城市、地区之间收费规则会略有不同。 |
||||
<view class=""> |
||||
-¥6 |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
运费优惠仅针对基础运费部分进行抵扣; |
||||
</view> |
||||
<view class="pd10"> |
||||
<view class="font15"> |
||||
基础运费 |
||||
</view> |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
基础运费6元 |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
不同城市、地区之间收费规则会略有不同。 |
||||
</view> |
||||
<view class="font14 color999 marb5"> |
||||
运费优惠仅针对基础运费部分进行抵扣; |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 优惠券 --> |
||||
<view v-if="keywords == 'coupon'" class="backcor9 height100 pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>选择优惠券</text></view> |
||||
|
||||
<view @click="noUse" class="fcor666 fotct pd-main mart10 border-8r backcolorfff"> |
||||
不使用优惠券 |
||||
<!-- 优惠券 --> |
||||
<view v-if="keywords == 'coupon'" class="backcor9 pop-contain pd-main"> |
||||
<view class="pop-title fontwig6"><text>选择优惠券</text></view> |
||||
<radio-group @change="radioChange" > |
||||
<view class="dis-flex flex-sp fcor666 pd-main mart10 border-8r backcolorfff"> |
||||
<view class=""> |
||||
不使用优惠券 |
||||
</view> |
||||
<view class=""> |
||||
<radio class="radio-ca" :checked="yhqType == 0" :value="0" color="#FF1A34" /> |
||||
</view> |
||||
</view> |
||||
|
||||
<radio-group @change="radioChange"> |
||||
<view v-for="(item,index) in yhqId" :key="item" class="dis-flex flex-sp pd-main mart10 border-8r backcolorfff"> |
||||
<view class="wid25 fotct paddtright5 right-border"> |
||||
<view class="fotred font20 fontwig6"> |
||||
8.8折券 |
||||
</view> |
||||
<view class="font13 mart5 fcor666"> |
||||
最高抵10元 |
||||
|
||||
<view v-for="(item,index) in discountList" :key="index" class="pd-main mart10 border-8r backcolorfff" style="box-sizing: border-box;"> |
||||
<view class="dis-flex flex-sp "> |
||||
<view class="wid25 fotct paddtright5 right-border"> |
||||
<view class="fotred font20 fontwig6"> |
||||
<image class="st-img" v-if="item.discountImg" :src="imageUrl+item.discountImg" mode="aspectFill"> |
||||
</image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="flex-1 paddleft5"> |
||||
<view class="font14"> |
||||
【新人专享】全品类可用(特殊商品除外) |
||||
<view class="flex-1 paddleft5"> |
||||
<view :class="' font14 '+item.discountCondition<=totalPrice?' ':' fcor666 '"> |
||||
{{item.discountName}} |
||||
</view> |
||||
<view class="font13 mart5 fcor666"> |
||||
截止时间:{{item.useEndTime | formatDate }} |
||||
</view> |
||||
</view> |
||||
<view class="font13 mart5 fcor666"> |
||||
2023.03.27-2023.04.10 |
||||
<view class="" v-if="item.discountCondition<=totalPrice"> |
||||
|
||||
<radio class="radio-ca" :checked="yhqType == item.id" :value="item.id" color="#FF1A34" /> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class=""> |
||||
<radio class="radio-ca" :checked="yhqType == item" :value="item" color="#FF1A34" /> |
||||
<view v-if="item.discountCondition>totalPrice&&item.discountType == 1" class="paddtop10 mart10 border-t font14"> |
||||
<view class="fotred fontwig6 ">不可用原因</view> |
||||
<view class="fcor666"> |
||||
使用门槛为{{item.discountCondition}}元，还差{{item.discountCondition-totalPrice}}元才能使用 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</radio-group> |
||||
|
||||
</view> |
||||
</radio-group> |
||||
|
||||
|
||||
</view> |
||||
|
||||
</wybPopup> |
||||
|
||||
</wybPopup> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import wybPopup from '@/components/wyb-popup/wyb-popup.vue' |
||||
const app = getApp(); |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
images:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg", |
||||
keywords:'', |
||||
yhqType:111, |
||||
yhqId:[ |
||||
111,222,333,444 |
||||
], |
||||
data() { |
||||
return { |
||||
imageUrl: app.globalData.imgUrl, //图片地址 |
||||
keywords: '', |
||||
// |
||||
|
||||
// yhqId: [ |
||||
// 111, 222, 333, 444 |
||||
// ], |
||||
// |
||||
|
||||
goodsList: [],//商品列表 |
||||
imageUrl: app.globalData.imgUrl, //图片地址 |
||||
postPrice: null, //运费信息 |
||||
|
||||
discountList:[],//优惠券信息 |
||||
totalPrice:0,//商品总金额 |
||||
yhqType: 0,//选择的优惠券id |
||||
|
||||
|
||||
} |
||||
}, |
||||
components:{ |
||||
filters:{ |
||||
formatDate(value, spe = '/') { |
||||
let data = new Date(value); |
||||
let year = data.getFullYear(); |
||||
let month = data.getMonth() + 1; |
||||
let day = data.getDate(); |
||||
let h = data.getHours(); |
||||
let mm = data.getMinutes(); |
||||
let s = data.getSeconds(); |
||||
month = month >= 10 ? month : "0" + month; |
||||
day = day >= 10 ? day : "0" + day; |
||||
h = h >= 10 ? h : "0" + h; |
||||
mm = mm >= 10 ? mm : "0" + mm; |
||||
s = s >= 10 ? s : "0" + s; |
||||
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; |
||||
}, |
||||
}, |
||||
computed: { |
||||
getNumberAll() { |
||||
if (this.goodsList.length > 0) { |
||||
let num = 0; |
||||
this.goodsList.map(item => { |
||||
num += Number(item.num); |
||||
}) |
||||
|
||||
return num; |
||||
} else { |
||||
return 0 |
||||
} |
||||
|
||||
}, |
||||
//计算运费 |
||||
postPriceAll() { |
||||
if (this.postPrice) { |
||||
if (this.postPrice.totalPrice >= this.postPrice.freePostPrice) { |
||||
return 0 |
||||
} else { |
||||
return this.postPrice.freightPrice; |
||||
} |
||||
} else { |
||||
return 0; |
||||
} |
||||
}, |
||||
}, |
||||
components: { |
||||
wybPopup |
||||
}, |
||||
methods:{ |
||||
methods: { |
||||
|
||||
// //goods货品， freight运费,integral积分,coupon优惠券 |
||||
show(str){ |
||||
show(str, data) { |
||||
|
||||
this.goodsList = []; |
||||
this.postPrice = null; |
||||
this.discountList = []; |
||||
this.totalPrice = 0; |
||||
|
||||
|
||||
this.keywords = str; |
||||
if (str == 'goods') { |
||||
this.goodsList = data; |
||||
} else if (str == 'freight') { |
||||
this.postPrice = data; |
||||
console.log(this.postPrice, "obj") |
||||
}else if(str == 'coupon'){ |
||||
this.discountList =data.discountList//优惠券信息 |
||||
this.totalPrice =data.totalPrice //商品总金额 |
||||
|
||||
} |
||||
|
||||
this.$refs.popup.show(); |
||||
}, |
||||
radioChange(e){ |
||||
radioChange(e) { |
||||
this.yhqType = e.detail.value; |
||||
console.log(this.yhqType) |
||||
this.$refs.popup.close() |
||||
}, |
||||
hide(){ |
||||
console.log(this.yhqType) |
||||
// 关闭的时候弹射方法 |
||||
hide() { |
||||
this.$emit('selectYhq',this.yhqType) |
||||
}, |
||||
noUse(){ |
||||
this.yhqType = 0 |
||||
this.$refs.popup.close(); |
||||
} |
||||
// noUse() { |
||||
// this.yhqType = 0 |
||||
// this.$refs.popup.close(); |
||||
// } |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.flex-row{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.bottom-border{ |
||||
border-bottom: 1px solid #f6f6f6; |
||||
&:last-of-type{ |
||||
border-bottom: none; |
||||
.flex-row { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
.right-border{ |
||||
border-right: 1px dotted #EEEEEE; |
||||
|
||||
} |
||||
|
||||
.pd10{ |
||||
padding: 10px 0; |
||||
} |
||||
.pd15{ |
||||
padding: 15px 0; |
||||
} |
||||
|
||||
.fotred{ |
||||
color: #FF1A34; |
||||
} |
||||
|
||||
.pop-contain{ |
||||
// text-align: center; |
||||
padding-top: 50px; |
||||
.pop-title{ |
||||
text-align: center; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 18px; |
||||
position: fixed; |
||||
z-index:10; |
||||
top:0; |
||||
left: 0; |
||||
right: 0; |
||||
background-color: #ffffff; |
||||
|
||||
.bottom-border { |
||||
border-bottom: 1px solid #f6f6f6; |
||||
|
||||
&:last-of-type { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 商品 |
||||
.goods-pop{ |
||||
display: flex; |
||||
align-items: center; |
||||
.st-img{ |
||||
width: 82px; |
||||
height: 82px; |
||||
|
||||
.right-border { |
||||
border-right: 1px dotted #EEEEEE; |
||||
|
||||
} |
||||
.goods-flex1{ |
||||
flex: 1; |
||||
padding: 0 20rpx; |
||||
text-align: left; |
||||
|
||||
.pd10 { |
||||
padding: 10px 0; |
||||
} |
||||
} |
||||
|
||||
.pd15 { |
||||
padding: 15px 0; |
||||
} |
||||
|
||||
// 优惠券 |
||||
.radio-ca{ |
||||
// width: 20rpx; |
||||
// height: 20rpx; |
||||
} |
||||
.fotred { |
||||
color: #FF1A34; |
||||
} |
||||
|
||||
.pop-contain { |
||||
// text-align: center; |
||||
padding-top: 50px; |
||||
|
||||
.pop-title { |
||||
text-align: center; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
font-size: 18px; |
||||
position: fixed; |
||||
z-index: 10; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background-color: #ffffff; |
||||
} |
||||
} |
||||
|
||||
// 商品 |
||||
.goods-pop { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
|
||||
|
||||
.goods-flex1 { |
||||
flex: 1; |
||||
padding: 0 20rpx; |
||||
text-align: left; |
||||
} |
||||
} |
||||
|
||||
.st-img { |
||||
width: 82px; |
||||
height: 82px; |
||||
} |
||||
// 优惠券 |
||||
.radio-ca { |
||||
// width: 20rpx; |
||||
// height: 20rpx; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue