czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

会员支付密码修改

Browse Source
This commit is contained in:
GaoHao
2024-08-03 09:19:37 +08:00
parent 8dd53c530a
commit e1e501e150
6 changed files with 781 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/cwx-keyboard/cwx-keyboard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class='keyboard' @click.stop='_handleKeyPress'> <view class='keyboard' :style="{position: pos}" @click.stop='_handleKeyPress'>
<view class='key-row'> <view class='key-row'>
<view class='key-cell cell_b' data-num='1'>1</view> <view class='key-cell cell_b' data-num='1'>1</view>
<view class='key-cell cell_b' data-num='2'>2</view> <view class='key-cell cell_b' data-num='2'>2</view>
@@ -46,7 +46,11 @@
}, },
btnColor: { btnColor: {
default: 'green', default: 'green',
} },
pos: {
default: 'fixed',
type: String
},
}, },
data() { data() {
return { return {

224
components/payPasswordtwo - 副本.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<!-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
<u-popup :show="payPasswordShow" :round="20" mode="bottom" @close="payPasswordShow = false" height="500" :safeAreaInsetBottom="false">
<view class="pay-info-wrap">
<view class="info-wrap flex-between">
<view class="close" @click="showShopInfo = false">
<u-icon name="close" color="#999999" size="28"></u-icon>
</view>
<text class="title">请输入支付密码</text>
<view></view>
</view>
<view class="info-content">
<view style="margin-bottom: 128rpx;">
<view class="pay-title">
<text style="margin-top: 4rpx;">￥ </text>
<text>123</text>
</view>
<view class="pay-password" @click="onPayUp">
<view class="list">
<text v-show="passwordArr.length >= 1">●</text>
</view>
<view class="list">
<text v-show="passwordArr.length >= 2">●</text>
</view>
<view class="list">
<text v-show="passwordArr.length >= 3">●</text>
</view>
<view class="list">
<text v-show="passwordArr.length >= 4">●</text>
</view>
<view class="list">
<text v-show="passwordArr.length >= 5">●</text>
</view>
<view class="list">
<text v-show="passwordArr.length >= 6">●</text>
</view>
</view>
<!-- <view class="hint" @click="gopaypassword">
<text>忘记支付密码？</text>
</view> -->
</view>
<!-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
</view>
</view>
</u-popup>
</template>
<script>
export default {
props: {
listinfo: {
type: Object,
default () {
return {
}
}
},
},
components: {
},
data() {
return {
// AffirmStatus: 1,
payPasswordShow: true,
passwordArr: [],
oldPasswordArr: [],
newPasswordArr: [],
afPasswordArr: [],
};
},
onLoad() {
},
methods: {
// 忘记支付密码
gopaypassword() {
uni.pro.navigateTo('/pages/user/repairpassword')
},
/**
* 唤起键盘
*/
onPayUp() {
this.$refs.CodeKeyboard.show();
},
/**
* 支付键盘回调
* @param {Object} val
*/
KeyInfo(val) {
if (val.index >= 6) {
return;
}
// 判断是否输入的是删除键
if (val.keyCode === 8) {
// 删除最后一位
this.passwordArr.splice(val.index + 1, 1)
}
// 判断是否输入的是.
else if (val.keyCode == 190) {
// 输入.无效
} else {
this.passwordArr.push(val.key);
}
// uni.showModal({
// title: '温馨提示',
// content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
// })
// 判断是否等于6
if (this.passwordArr.length === 6) {
// this.AffirmStatus = this.AffirmStatus + 1;
let str = ''
this.passwordArr.forEach(res => {
str += res
})
this.$emit('accountPayevent', str)
this.passwordArr = [];
}
// 判断到哪一步了
// if (this.AffirmStatus === 1) {
// this.oldPasswordArr = this.passwordArr;
// } else if (this.AffirmStatus === 2) {
// this.newPasswordArr = this.passwordArr;
// } else if (this.AffirmStatus === 3) {
// this.afPasswordArr = this.passwordArr;
// } else if (this.AffirmStatus === 4) {
// console.log(this.oldPasswordArr.join(''));
// console.log(this.newPasswordArr.join(''));
// console.log(this.afPasswordArr.join(''));
// uni.showToast({
// title: '修改成功',
// icon: 'none'
// })
// setTimeout(() => {
// uni.navigateBack();
// }, 2000)
// }
this.$forceUpdate();
}
}
}
</script>
<style lang="scss">
.page-total{
position: inherit;
}
/deep/ .page-total{
position: inherit;
}
.pay-info-wrap{
.info-wrap{
padding: 64rpx 30rpx 0 30rpx;
box-sizing: border-box;
.title{
align-self: center;
font-size: 32rpx;
color: #333;
font-weight: bold;
}
}
.info-content{
.pay-title {
display: flex;
align-items: flex-end;
justify-content: center;
font-weight: bold;
width: 100%;
font-size: 48rpx;
color: #333;
margin-top: 48rpx;
text {
font-size: 60rpx;
color: #333;
}
}
.pay-password {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 64rpx;
.list {
width: 88rpx;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #999;
border-radius: 8rpx;
text {
font-size: 32rpx;
}
}
}
.hint {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100rpx;
text {
font-size: 28rpx;
color: #ccc;
}
}
}
}
</style>

397
components/payPasswordtwo.vue
View File

@@ -1,224 +1,227 @@
<template> <template>
<view class="content">
<!-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入返回事件 --> <view style="margin-bottom: 128rpx;">
<u-popup :show="payPasswordShow" :round="20" mode="bottom" @close="payPasswordShow = false" height="500" :safeAreaInsetBottom="false"> <view class="contenttext flex-center">
<view class="pay-info-wrap"> {{form.password.length == 6?'请再次确认支付密码':"请设置新密码，用于支付验证"}}
<view class="info-wrap flex-between">
<view class="close" @click="showShopInfo = false">
<u-icon name="close" color="#999999" size="28"></u-icon>
</view>
<text class="title">请输入支付密码</text>
<view></view>
</view> </view>
<view class="info-content"> <view class="contentbox flex-between">
<view style="margin-bottom: 128rpx;"> <view class="contentboxitem flex-colum">
<view class="pay-title"> {{consumeFee.slice(0,1)}}
<text style="margin-top: 4rpx;">￥ </text> </view>
<text>123</text> <view class="contentboxitem flex-colum">
</view> {{consumeFee.slice(1,2)}}
<view class="pay-password" @click="onPayUp"> </view>
<view class="list"> <view class="contentboxitem flex-colum">
<text v-show="passwordArr.length >= 1">●</text> {{consumeFee.slice(2,3)}}
</view> </view>
<view class="list"> <view class="contentboxitem flex-colum">
<text v-show="passwordArr.length >= 2">●</text> {{consumeFee.slice(3,4)}}
</view> </view>
<view class="list"> <view class="contentboxitem flex-colum">
<text v-show="passwordArr.length >= 3">●</text> {{consumeFee.slice(4,5)}}
</view> </view>
<view class="list"> <view class="contentboxitem flex-colum">
<text v-show="passwordArr.length >= 4">●</text> {{consumeFee.slice(5,6)}}
</view>
<view class="list">
<text v-show="passwordArr.length >= 5">●</text>
</view>
<view class="list">
<text v-show="passwordArr.length >= 6">●</text>
</view>
</view>
<!-- <view class="hint" @click="gopaypassword">
<text>忘记支付密码？</text>
</view> -->
</view> </view>
<!-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
</view> </view>
</view> </view>
</u-popup> <!-- <view class="" v-else>
</view> -->
<cwx-keyboard ref="keyboard" :pos="'inherit'" @confirmEvent="confirmEvent"
:money.sync="consumeFee"></cwx-keyboard>
</view>
</template> </template>
<script> <script>
import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard';
export default { export default {
props: {
listinfo: {
type: Object,
default () {
return {
}
}
},
},
components: { components: {
cwxKeyboard
}, },
data() { data() {
return { return {
// AffirmStatus: 1, isPwd: uni.cache.get('userInfo').isPwd,
payPasswordShow: true, form: {
passwordArr: [], mobile: uni.cache.get('userInfo').telephone,
oldPasswordArr: [], password: '', //密码
newPasswordArr: [], payPassword: '', //二次密码
afPasswordArr: [], checkCode: ''
},
passwords: false,
payPasswords: false,
// 注册定时器 初始值
second: 60,
showText: true,
Recapture: '发送验证码',
consumeFee: '', //第一遍
consumeFees: '', //第二遍
money: ''
}; };
}, },
onLoad() { onLoad() {
console.log(uni.cache.get('userInfo').isPwd)
if (uni.cache.get('userInfo').isPwd != 0) {
uni.setNavigationBarTitle({
title: '忘记支付密码', // 标题文本，必须是字符串
});
}
}, },
methods: { watch: {
// 忘记支付密码 consumeFee(newVal, oldVal) {
gopaypassword() { if (this.form.password.length == 6) {
uni.pro.navigateTo('/pages/user/repairpassword') this.form.payPassword = newVal
}, if (this.form.payPassword.length == 6) {
/** this.userInfosavePayPassword()
* 唤起键盘 }
*/
onPayUp() {
this.$refs.CodeKeyboard.show();
},
/**
* 支付键盘回调
* @param {Object} val
*/
KeyInfo(val) {
if (val.index >= 6) {
return;
}
// 判断是否输入的是删除键
if (val.keyCode === 8) {
// 删除最后一位
this.passwordArr.splice(val.index + 1, 1)
}
// 判断是否输入的是.
else if (val.keyCode == 190) {
// 输入.无效
} else { } else {
this.passwordArr.push(val.key); this.form.password = newVal
} if (this.form.password.length == 6) {
this.$refs.keyboard._handleClearKey() //清空
// uni.showModal({
// title: '温馨提示',
// content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
// })
// 判断是否等于6
if (this.passwordArr.length === 6) {
// this.AffirmStatus = this.AffirmStatus + 1;
let str = ''
this.passwordArr.forEach(res => {
str += res
})
this.$emit('accountPayevent', str)
this.passwordArr = [];
}
// 判断到哪一步了
// if (this.AffirmStatus === 1) {
// this.oldPasswordArr = this.passwordArr;
// } else if (this.AffirmStatus === 2) {
// this.newPasswordArr = this.passwordArr;
// } else if (this.AffirmStatus === 3) {
// this.afPasswordArr = this.passwordArr;
// } else if (this.AffirmStatus === 4) {
// console.log(this.oldPasswordArr.join(''));
// console.log(this.newPasswordArr.join(''));
// console.log(this.afPasswordArr.join(''));
// uni.showToast({
// title: '修改成功',
// icon: 'none'
// })
// setTimeout(() => {
// uni.navigateBack();
// }, 2000)
// }
this.$forceUpdate();
}
}
}
</script>
<style lang="scss">
.page-total{
position: inherit;
}
/deep/ .page-total{
position: inherit;
}
.pay-info-wrap{
.info-wrap{
padding: 64rpx 30rpx 0 30rpx;
box-sizing: border-box;
.title{
align-self: center;
font-size: 32rpx;
color: #333;
font-weight: bold;
}
}
.info-content{
.pay-title {
display: flex;
align-items: flex-end;
justify-content: center;
font-weight: bold;
width: 100%;
font-size: 48rpx;
color: #333;
margin-top: 48rpx;
text {
font-size: 60rpx;
color: #333;
}
}
.pay-password {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 64rpx;
.list {
width: 88rpx;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #999;
border-radius: 8rpx;
text {
font-size: 32rpx;
} }
} }
} }
},
methods: {
confirmEvent(e) {
console.log(e)
},
async CodeRegister() {
const res = await this.api.phoneValidateCode({
// post 手机验证码
phone: this.form.mobile
});
if (res) {
uni.showToast({
title: '验证码获取成功',
icon: 'none'
});
// 定时器
this.showText = false;
this.Recapture = '重新获取';
var interval = setInterval(() => {
let times = --this.second;
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
}, 1000);
setTimeout(() => {
clearInterval(interval);
this.second = 60;
this.showText = true;
}, 60000);
}
},
async loginwxuserInfo() {
let res = await this.api.loginwxuserInfo({
userId: uni.cache.get('userInfo').id
})
if (res.code == 0) {
uni.cache.set('userInfo', res.data);
}
},
async userInfosavePayPassword() {
if (this.form.mobile.length != 11 && this.isPwd == 0) {
uni.showToast({
title: '手机号必须是11位',
icon: 'none'
});
return false;
}
if (this.form.password == null || this.form.password == '') {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return false;
}
if (this.form.payPassword == null || this.form.payPassword == '') {
uni.showToast({
title: '请输入确认密码',
icon: 'none'
});
return false;
}
if (this.form.password.length != 6 || this.form.payPassword.length != 6) {
uni.showToast({
title: '密码必须是6位',
icon: 'none'
});
return false;
}
if (this.form.payPassword != this.form.password) {
this.$refs.keyboard._handleClearKey() //清空
this.form.payPassword = ''
this.form.password = ''
uni.showToast({
title: '密码和确认密码不一致',
icon: 'none'
});
return false;
}
if (this.form.checkCode == null || this.form.checkCode == '') {
uni.showToast({
title: '请输入验证码',
icon: 'none'
});
return false;
}
let res = await this.api.loginresetPwd({
pwd: this.form.password,
code: this.form.checkCode
})
.hint { if (res.code == 0) {
display: flex; if (uni.cache.get('userInfo').isPwd != 0) {
align-items: center; uni.showToast({
justify-content: center; title: '修改成功',
width: 100%; icon: 'none'
height: 100rpx; });
} else {
text { uni.showToast({
font-size: 28rpx; title: '设置成功',
color: #ccc; icon: 'none'
});
}
// 获取用户信息
this.loginwxuserInfo()
setTimeout(() => {
uni.navigateBack();
}, 1000);
} else {
this.$refs.keyboard._handleClearKey() //清空
this.form.payPassword = ''
this.form.password = ''
} }
} }
} }
};
</script>
<style lang="scss">
/keep/ .keyboard {
position: inherit;
}
.content {
height: 100%;
background: #FFFFFF;
.contenttext {
padding: 48rpx 0;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 40rpx;
color: #333333;
}
.contentbox {
margin-top: 48rpx;
padding: 0 56rpx;
.contentboxitem {
width: 88rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #999999;
}
}
} }
</style> </style>

24
pages/order/confirm_order.vue
View File

@@ -124,8 +124,24 @@
<view class="paymentBtnText" @tap="$u.debounce(orderdetail, 500)" v-else> {{ paymentBtnText }} </view> <view class="paymentBtnText" @tap="$u.debounce(orderdetail, 500)" v-else> {{ paymentBtnText }} </view>
</view> </view>
<u-popup :show="ispws" :round="20" mode="bottom" @close="ispws = false" height="500" :safeAreaInsetBottom="false">
<view class="pay-info-wrap">
<view class="info-wrap flex-between">
<view class="close" @click="showShopInfo = false">
<u-icon name="close" color="#999999" size="28"></u-icon>
</view>
<text class="title">请输入支付密码</text>
<view></view>
</view>
<view class="info-content">
<payPasswordtwo ref="payPwd" :listinfo="listinfo" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo>
</view>
</view>
</u-popup>
<!-- 支付密码 --> <!-- 支付密码 -->
<payPasswordtwo ref="payPwd" :listinfo="listinfo" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo> <!-- <payPasswordtwo ref="payPwd" :listinfo="listinfo" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo> -->
</view> </view>
</template> </template>
@@ -176,6 +192,7 @@
remark: "", // 备注 remark: "", // 备注
radiovalue: 1, // 支付方式 radiovalue: 1, // 支付方式
ispws: false, // 输入支付密码 ispws: false, // 输入支付密码
payPasswordShow: false,
amountVIP: null, // 会员信息 amountVIP: null, // 会员信息
listinfoid: null, listinfoid: null,
paymentBtnText: "会员卡支付", paymentBtnText: "会员卡支付",
@@ -392,9 +409,10 @@
}) })
} else { } else {
uni.hideLoading() uni.hideLoading()
// this.payPasswordShow = false;
this.ispws = true this.ispws = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.payPwd.onPayUp(); // this.$refs.payPwd.onPayUp();
}) })
} }
} }
@@ -460,7 +478,7 @@
* @param {Object} pwd * @param {Object} pwd
*/ */
async accountPayevent(pwd) { async accountPayevent(pwd) {
this.ispws = false this.ispws = false;
console.log(pwd) console.log(pwd)
let res = await this.api.accountPay({ let res = await this.api.accountPay({
orderId: this.listinfoid, orderId: this.listinfoid,

375
pages/order_food/order_food.vue
View File

@@ -4,19 +4,16 @@
<view v-if="fixedtrue" <view v-if="fixedtrue"
style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;"> style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image> <image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
<text style="margin-left:10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text> <text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
</view> </view>
<!-- 顶部面板 --> <!-- 顶部面板 -->
<view class="top--panel"> <view class="top--panel">
<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity' @Topdistance='Topdistance'></navseat> <navseat :opacity='opacity' :titleshow='true' :heightshow='opacity'></navseat>
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<view v-show="isNavShow" :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 999'}"></view>
<!-- #endif --> <!-- #endif -->
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 --> <!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
<!-- https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png --> <!-- https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png -->
<image class="panelimgbackground" <image class="panelimgbackground" :src="shopInfo.storeInfo.coverImg" mode="aspectFill">
:src="shopInfo.storeInfo.coverImg"
mode="aspectFill">
</image> </image>
<view class="panelone"> <view class="panelone">
{{ shopInfo.storeInfo.shopName }} {{ shopInfo.storeInfo.shopName }}
@@ -37,9 +34,10 @@
本店招牌菜 本店招牌菜
</view> </view>
<view class="panelfive"> <view class="panelfive">
<scroll-view :scroll-x="panelfiveShow" :scroll-into-view="leftIntoView" :scroll-with-animation="false"> <scroll-view :scroll-x="true" :scroll-into-view="leftIntoView" :scroll-with-animation="false">
<view class="panelfive_list"> <view class="panelfive_list">
<view class="panelfiveitem" @click="clickspecifications(item,index,index,'热销')" v-for="(item,index) in shopProductList.hots" :key="index"> <view class="panelfiveitem" @click="clickspecifications(item,index,index,'热销')"
v-for="(item,index) in shopProductList.hots" :key="index">
<image class="panelfiveitemimage" :src="item.coverImg" mode="aspectFill"></image> <image class="panelfiveitemimage" :src="item.coverImg" mode="aspectFill"></image>
<view class="panelfiveitemone"> <view class="panelfiveitemone">
{{ item.name }} {{ item.name }}
@@ -70,14 +68,16 @@
<view class="sku-wrap flex-center" v-if="item.productSkuResult != null" <view class="sku-wrap flex-center" v-if="item.productSkuResult != null"
@click.stop="clickspecifications(item,index,index1)"> @click.stop="clickspecifications(item,index,index1)">
<text class="t">选规格</text> <text class="t">选规格</text>
<text class="dot num" v-if="item.cartNumber != '0'">{{item.cartNumber<99?item.cartNumber:'99+'}}</text> <text class="dot num"
v-if="item.cartNumber != '0'">{{item.cartNumber<99?item.cartNumber:'99+'}}</text>
</view> </view>
<view class="Controls" v-else> <view class="Controls" v-else>
<view v-if="item.cartNumber != '0'" @click.stop="cartadd(item,'-',item.productSkuResult == null ? '单规格':'',$event)"> <view v-if="item.cartNumber != '0'"
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon> @click.stop="cartadd(item,'-',item.productSkuResult == null ? '单规格':'',$event)">
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
</view> </view>
<text class="num"> {{ item.cartNumber }} </text> <text class="num"> {{ item.cartNumber }} </text>
<view @click.stop="cartadd(item,'+',item.productSkuResult == null ? '单规格':'')"> <view @click.stop="cartadd(item,'+',item.productSkuResult == null ? '单规格':'')">
<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon> <u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
</view> </view>
</view> </view>
@@ -92,44 +92,54 @@
<view class="scroll-panel" id="scroll-panel"> <view class="scroll-panel" id="scroll-panel">
<view class="list-box"> <view class="list-box">
<view class="left"> <view class="left">
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }" <scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight -100 + 'px' }"
:scroll-into-view="leftIntoView" :scroll-with-animation="false"> :scroll-into-view="leftIntoView" :scroll-with-animation="false">
<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index" <view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index" :class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
@tap="leftTap($event,index)">{{item.name}}</view> @tap="leftTap">{{item.name}}</view>
</scroll-view> </scroll-view>
</view> </view>
<view class="main"> <view class="main">
<scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll" <scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight"
:scroll-into-view="scrollInto" :scroll-with-animation="true"> :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll" :scroll-into-view="scrollInto"
<view class="item main-item" v-for="(item,index) in shopProductList.productInfo" :key="index" :id="'item-'+index"> :scroll-with-animation="false">
<view class="item main-item" v-for="(item,index) in shopProductList.productInfo" :key="index"
:id="'item-'+index">
<view class="title"> <view class="title">
<view>{{item.name}}</view> <view>{{item.name}}</view>
</view> </view>
<view class="goods" @click="clickspecifications(item1,index,index1)" v-for="(item1,index1) in item.products" :key="index1"> <view class="goods" @click="clickspecifications(item1,index,index1)"
<image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true" :src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"></image> v-for="(item1,index1) in item.products" :key="index1">
<image class="goodsImg" src="@/static/1.gif" mode="" v-else :lazy-load="true" ></image> <image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
<view v-if="item.name=='热销'" class="topSort" :class="'c'+(index1+1)">TOP{{index1+1}}</view> :src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"></image>
<image class="goodsImg" src="@/static/1.gif" mode="" v-else :lazy-load="true"></image>
<view v-if="item.name=='热销'" class="topSort" :class="'c'+(index1+1)">TOP{{index1+1}}
</view>
<view class="goods_right"> <view class="goods_right">
<view class="name">{{ item1.name }}</view> <view class="name">{{ item1.name }}</view>
<view class="lookBack" v-if="item.name=='热销'">本店回头客第{{index1+1}}名</view> <view class="lookBack" v-if="item.name=='热销'">本店回头客第{{index1+1}}名</view>
<view class="describe"> {{item1.shortTitle?item1.shortTitle:''}} </view> <view class="describe"> {{item1.shortTitle?item1.shortTitle:''}} </view>
<view class="monthlySale">月售{{item1.stockNumber}}</view> <view class="monthlySale">月售{{item1.stockNumber}}</view>
<view class="money">￥<text class="money_num">{{ item1.lowPrice }}</text>/份<text class="suit">「{{item1.suit}}份起点」</text></view> <view class="money">￥<text class="money_num">{{ item1.lowPrice }}</text>/份<text
class="suit">「{{item1.suit}}份起点」</text></view>
<view class="flex-end" v-if="item1.productSkuResult != null"> <view class="flex-end" v-if="item1.productSkuResult != null">
<view class="sku-wrap flex-center" @click.stop="clickspecifications(item1,index,index1)"> <view class="sku-wrap flex-center"
@click.stop="clickspecifications(item1,index,index1)">
<text class="t">选规格</text> <text class="t">选规格</text>
<text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text> <text class="dot num"
v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text>
</view> </view>
</view> </view>
<view class="Controls" v-else> <view class="Controls" v-else>
<view v-if="item1.cartNumber != '0'" @click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)"> <view v-if="item1.cartNumber != '0'"
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon> @click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)">
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
</view> </view>
<text class="num"> {{ item1.cartNumber }} </text> <text class="num"> {{ item1.cartNumber }} </text>
<view @click.stop="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')"> <view
@click.stop="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')">
<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon> <u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
</view> </view>
@@ -142,20 +152,14 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 底部面板 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
<!-- <view class="bottom-panel">
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
<view>这里底部内容占位区域，不需要则删除</view>
<view>可添加需放在页面底部的内容，比如购物车栏目</view>
</view>
</view> -->
<!-- 购物车悬浮条 --> <!-- 购物车悬浮条 -->
<view class="cart-wrap" v-if="cartListsdatashow"> <view class="cart-wrap" v-if="cartListsdatashow">
<view class="cart-content"> <view class="cart-content">
<view class="left"> <view class="left">
<view class="iconBox"> <view class="iconBox">
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/shopIcon.png" <image class="icon"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/shopIcon.png"
mode="aspectFill" @click="showCart = !showCart"> mode="aspectFill" @click="showCart = !showCart">
</image> </image>
<text class="u-badge"> {{cartLists_count<99?cartLists_count:'99+'}} </text> <text class="u-badge"> {{cartLists_count<99?cartLists_count:'99+'}} </text>
@@ -165,13 +169,14 @@
<text class="num">{{cartLists.amount||'0.00'}}</text> <text class="num">{{cartLists.amount||'0.00'}}</text>
</view> </view>
<view class="btn" @tap="$u.debounce(orderdetail, 500)"> <view class="btn" @tap="$u.debounce(orderdetail, 500)">
<text class="t">去结算</text> <text class="t">结算</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 购物车 --> <!-- 购物车 -->
<u-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }" @close="showCart = false"> <u-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
@close="showCart = false">
<view class="cart-list-wrap"> <view class="cart-list-wrap">
<view class="cart-header flex-between"> <view class="cart-header flex-between">
<view class="num">已点 {{cartLists_count}} 份</view> <view class="num">已点 {{cartLists_count}} 份</view>
@@ -197,7 +202,7 @@
</view> </view>
<view class="operation-wrap"> <view class="operation-wrap">
<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')"> <view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')">
<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon> <u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
</view> </view>
<text class="num" v-if="item.number">{{ item.number }}</text> <text class="num" v-if="item.number">{{ item.number }}</text>
<view class="btn" @click="cartListadd(item,index,'+')"> <view class="btn" @click="cartListadd(item,index,'+')">
@@ -214,7 +219,7 @@
<!-- 店铺详情 --> <!-- 店铺详情 -->
<u-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500" > <u-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500">
<view class="shop-info-wrap"> <view class="shop-info-wrap">
<view class="info-wrap flex-between"> <view class="info-wrap flex-between">
<view></view> <view></view>
@@ -227,7 +232,8 @@
<view class="row" style="margin-bottom: 20rpx;"> <view class="row" style="margin-bottom: 20rpx;">
<view class="col"> <view class="col">
<text class="l">营业时间：</text> <text class="l">营业时间：</text>
<text class="t">{{ shopInfo.storeInfo.businessStartDay +'至'+ shopInfo.storeInfo.businessEndDay +' '+ shopInfo.storeInfo.businessTime }}</text> <text
class="t">{{ shopInfo.storeInfo.businessStartDay +'至'+ shopInfo.storeInfo.businessEndDay +' '+ shopInfo.storeInfo.businessTime }}</text>
</view> </view>
<view class="col"> <view class="col">
<text class="l">商家地址：</text> <text class="l">商家地址：</text>
@@ -249,17 +255,17 @@
</view> </view>
</u-popup> </u-popup>
<!-- 规格 --> <!-- 规格 -->
<u-popup :show="showShopsku" :round="20" mode="bottom" @close="showShopsku = false" <u-popup :show="showShopsku" :round="20" mode="bottom" @close="showShopsku = false"
:safeAreaInsetBottom='false'> :safeAreaInsetBottom='false'>
<view class="shop_sku" :style="{ 'max-height':scrollHeight + 'px' }"> <view class="shop_sku" :style="{ 'max-height':scrollHeight + 'px' }">
<view class="positionabsolute"> <view class="positionabsolute">
<u-icon name="close-circle" @click="showShopsku = false" color="#000" size="50"></u-icon> <u-icon name="close-circle" @click="showShopsku = false" color="#000" size="50"></u-icon>
</view> </view>
<image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image> <image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image>
<view class="shop_sku_name"> {{specifications.name}} </view> <view class="shop_sku_name"> {{specifications.name}} </view>
<view class="shop_sku_returned" v-if="specifications.typeName&&specifications.typeName=='热销'"> 本店回头客第{{specifications.indexb+1}}名 </view> <view class="shop_sku_returned" v-if="specifications.typeName&&specifications.typeName=='热销'">
本店回头客第{{specifications.indexb+1}}名 </view>
<view class="shop_sku_description"> {{specifications.shortTitle?specifications.shortTitle:''}} </view> <view class="shop_sku_description"> {{specifications.shortTitle?specifications.shortTitle:''}} </view>
<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index" <view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
@@ -288,7 +294,7 @@
<view class="btn" <view class="btn"
@click="shopAdd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')"> @click="shopAdd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
<u-icon name="minus-circle-fill" color="#E9AB7A" size="40"></u-icon> <u-icon name="minus-circle-fill" color="#E9AB7A" size="40"></u-icon>
</view> </view>
<text class="num">{{amountcartNumber}}</text> <text class="num">{{amountcartNumber}}</text>
<view class="btn" <view class="btn"
@@ -300,7 +306,9 @@
<view class="shop_skuselect flex-start" v-if="specifications.tagSnap"> <view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
<view class="shop_skuselectname">{{skuidname.toString()}}</view> <view class="shop_skuselectname">{{skuidname.toString()}}</view>
</view> </view>
<view class="addShopping" :class="amountcartNumber>0?'active':''" @click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">添加到购物车</view> <view class="addShopping" :class="amountcartNumber>0?'active':''"
@click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
添加到购物车</view>
</view> </view>
</view> </view>
</u-popup> </u-popup>
@@ -316,6 +324,7 @@
}, },
data() { data() {
return { return {
fixedtrue: true,
userInfo: uni.cache.get('userInfo'), //个人信息 userInfo: uni.cache.get('userInfo'), //个人信息
opacity: false, //是否显示 opacity: false, //是否显示
scrollHeight: 1000, scrollHeight: 1000,
@@ -327,40 +336,34 @@
leftIndex: 0, leftIndex: 0,
scrollInto: '', scrollInto: '',
isFixed: true, isFixed: true,
isNavShow: false, showShopInfo: false, //店铺信息弹窗是否显示
heightnav: '' ,//点击获取的距离 showShopsku: false, //多规格弹窗是否显示
showShopInfo: false, //店铺信息弹窗是否显示 skuId: null, // 多规格ID
showShopsku: false, //多规格弹窗是否显示
skuId: null, // 多规格ID
cartLists: {}, //购物车 cartLists: {}, //购物车
cartLists_count: 0, cartLists_count: 0,
shopInfo: {}, //店铺信息 shopInfo: {}, //店铺信息
panelfiveShow: false, shopProductList: {}, //商品信息
shopProductList: {
}, //商品信息
specifications: { specifications: {
}, // 规格信息 }, // 规格信息
socketTicket: null, socketTicket: null,
amountcartNumber: 0, amountcartNumber: 0,
skuNumber: 0, skuNumber: 0,
salePrice: '', //钱数 salePrice: '', //钱数
cartListsdatashow: false ,//是否显示购物车 cartListsdatashow: false, //是否显示购物车
showCart: false, showCart: false,
} }
}, },
onPageScroll(e) { onPageScroll(e) {
try { try {
if (e.scrollTop <= 44) { //搜索导航栏显示影藏 if (e.scrollTop <= 44) { //搜索导航栏显示影藏
this.isNavShow = false this.opacity = false
} else { } else {
this.isNavShow = true this.opacity = true
} }
} catch (e) { } catch (e) {
//TODO handle the exception //TODO handle the exception
} }
console.log(e.scrollTop,this.scrollTopSize)
if (e.scrollTop >= this.scrollTopSize) { //控制大图层 if (e.scrollTop >= this.scrollTopSize) { //控制大图层
this.isFixed = false; this.isFixed = false;
} else { } else {
@@ -370,10 +373,10 @@
computed: { computed: {
/* 计算左侧滚动位置定位 */ /* 计算左侧滚动位置定位 */
leftIntoView() { leftIntoView() {
return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`; return `left-${this.leftIndex? this.leftIndex:0}`;
}, },
HeighT() { //手机类型的尺寸 HeighT() { //手机类型的尺寸 导航栏高度
return this.$store.getters.is_BarHeight return this.$store.getters.is_BarHeight.heightBar + this.$store.getters.is_BarHeight.customBar
}, },
}, },
onReady() { onReady() {
@@ -383,10 +386,7 @@
this.scrollHeight = data.windowHeight this.scrollHeight = data.windowHeight
} }
}) })
this.panelfiveShow = true;
}, 100); }, 100);
/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
}, },
onLoad(e) { onLoad(e) {
if (e.q) { if (e.q) {
@@ -456,7 +456,7 @@
/** /**
* 通过桌码获取店铺信息 * 通过桌码获取店铺信息
*/ */
async productqueryShop () { async productqueryShop() {
let res = await this.api.productqueryShop({ let res = await this.api.productqueryShop({
code: uni.cache.get('tableCode'), code: uni.cache.get('tableCode'),
lng: uni.cache.get('getLocationstorage').lng, lng: uni.cache.get('getLocationstorage').lng,
@@ -464,9 +464,9 @@
}) })
if (res.code == 0) { if (res.code == 0) {
uni.cache.set('shopUser', res.data.storeInfo.id) uni.cache.set('shopUser', res.data.storeInfo.id)
this.handlemessage() //监听websocket返回
this.shopInfo = res.data; this.shopInfo = res.data;
this.productqueryProduct() //list 数据 this.productqueryProduct() //list 数据
this.handlemessage() //监听websocket返回
} else { } else {
setTimeout(() => { setTimeout(() => {
uni.pro.switchTab('index/index') uni.pro.switchTab('index/index')
@@ -485,7 +485,7 @@
}) })
if (res.code == 0) { if (res.code == 0) {
this.shopProductList = res.data; this.shopProductList = res.data;
if ( this.cartLists && this.cartLists.data && this.cartLists.data.length >= 0 ) { if (this.cartLists && this.cartLists.data && this.cartLists.data.length >= 0) {
this.setNumber() this.setNumber()
} }
setTimeout(() => { setTimeout(() => {
@@ -506,7 +506,7 @@
if (b == '单规格') { //没有规格为空 if (b == '单规格') { //没有规格为空
this.skuidname = [] this.skuidname = []
} }
let cartNumber = a == '+' ? item.cartNumber+1 : item.cartNumber-1; let cartNumber = a == '+' ? item.cartNumber + 1 : item.cartNumber - 1;
this.hodgepodge(item, 1, a, cartNumber) //获取skuid /1添加购物车 this.hodgepodge(item, 1, a, cartNumber) //获取skuid /1添加购物车
}, },
@@ -518,7 +518,7 @@
* @param {Object} a * @param {Object} a
* @param {Object} b * @param {Object} b
*/ */
shopAdd (item, index, index1, a, b) { shopAdd(item, index, index1, a, b) {
if ( a == "+" ){ if ( a == "+" ){
if ( this.amountcartNumber <= 0) { if ( this.amountcartNumber <= 0) {
this.amountcartNumber = this.amountcartNumber + item.suit; this.amountcartNumber = this.amountcartNumber + item.suit;
@@ -541,9 +541,8 @@
/** /**
* 添加购物车 * 添加购物车
*/ */
addShopping ( item, index, index1, a, b ) { addShopping(item, index, index1, a, b) {
console.log(item) if (this.amountcartNumber <= 0) {
if ( this.amountcartNumber <= 0 ) {
return; return;
} }
let num = 0; let num = 0;
@@ -574,7 +573,7 @@
try { try {
let params = { let params = {
"skuId": item.skuId, "skuId": item.skuId,
"num": c == '+' ? item.number + 1 : item.number -1, //数量 "num": c == '+' ? item.number + 1 : item.number - 1, //数量
"type": c == '+' ? 1 : 0, "type": c == '+' ? 1 : 0,
"productId": item.productId, //商品id "productId": item.productId, //商品id
"shopId": uni.cache.get('shopUser'), "shopId": uni.cache.get('shopUser'),
@@ -591,9 +590,9 @@
/** /**
* 添加到购物车 * 添加到购物车
*/ */
async addCart ( data ) { async addCart(data) {
let res = await this.api.cartAdd(data) let res = await this.api.cartAdd(data)
if ( res.code == 0) { if (res.code == 0) {
this.showShopsku = false; this.showShopsku = false;
this.$set(this, 'amountcartNumber', 0) this.$set(this, 'amountcartNumber', 0)
} }
@@ -613,7 +612,7 @@
/** /**
* 商品数量\购物车数量处理 * 商品数量\购物车数量处理
*/ */
setNumber () { setNumber() {
// 处理购物车相同id的情况下 数量相加 // 处理购物车相同id的情况下 数量相加
var summedArray = this.cartLists.data.reduce((acc, current) => { var summedArray = this.cartLists.data.reduce((acc, current) => {
const existing = acc.find(item => item.productId === current.productId); const existing = acc.find(item => item.productId === current.productId);
@@ -646,12 +645,10 @@
} }
}) })
}) })
this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true; this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
console.log(this.cartLists) if (this.cartLists.data.length > 0) {
if ( this.cartLists.data.length > 0 ){
this.cartLists_count = 0; this.cartLists_count = 0;
this.cartLists.data.forEach((v,e)=>{ this.cartLists.data.forEach((v, e) => {
console.log(v)
this.cartLists_count += v.number; this.cartLists_count += v.number;
}) })
} }
@@ -662,8 +659,7 @@
* @param {Object} index * @param {Object} index
* @param {Object} index1 * @param {Object} index1
*/ */
clickspecifications(item1, index, index1,type) { clickspecifications(item1, index, index1, type) {
console.log(item1)
this.skuidname = [] this.skuidname = []
this.specifications = item1 this.specifications = item1
this.specifications.indexa = index this.specifications.indexa = index
@@ -718,7 +714,6 @@
async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存 数量 价格等 async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存 数量 价格等
try { try {
let res = await this.api.productqueryProductSku({ let res = await this.api.productqueryProductSku({
code: uni.cache.get('tableCode'),
shopId: uni.cache.get('shopUser'), shopId: uni.cache.get('shopUser'),
productId: item.id, //商品id productId: item.id, //商品id
spec_tag: this.skuidname.join(",") spec_tag: this.skuidname.join(",")
@@ -786,7 +781,6 @@
* @param {Object} msg * @param {Object} msg
*/ */
getMessage(msg) { //wss 回显数据 getMessage(msg) { //wss 回显数据
console.log(msg.type)
if (msg == 1) { // 网络在连接 if (msg == 1) { // 网络在连接
this.fixedtrue = true this.fixedtrue = true
return false return false
@@ -824,7 +818,7 @@
this.cartLists = msg this.cartLists = msg
try { try {
//购物车为空的情况 //购物车为空的情况
if ( msg.data.length == 0) { if (msg.data.length == 0) {
this.showCart = false; this.showCart = false;
} }
this.setNumber() this.setNumber()
@@ -846,30 +840,22 @@
} }
}, },
// 导航栏高度 去计算列表页的高度
Topdistance(e) {
this.heightnav = e ////导航栏高度
},
/* 获取元素顶部信息 */ /* 获取元素顶部信息 */
getElementTop() { getElementTop() {
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
let view = uni.createSelectorQuery().selectAll('.main-item'); let view = uni.createSelectorQuery().selectAll('.main-item');
view.boundingClientRect(data => { view.boundingClientRect(async data => {
resolve(data); resolve(data);
}).exec(); }).exec();
this.$u.getRect('.scroll-panel').then(res => { this.$u.getRect('.scroll-panel').then(res => {
console.log(res) this.scrollTopSize = res.top; //元素距离顶部的距离
this.scrollTopSize = res.top - this.heightnav; //元素距离顶部的距离
this.scrollHeight = this.scrollHeight - this.heightnav
}) })
}).then((res) => { }).then((res) => {
let topArr = res.map((item) => { let topArr = res.map((item) => {
return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */ return item.top; /* 减去滚动容器距离顶部的距离 加导航栏高度*/
}); });
this.scrollHeight = this.scrollHeight - this.HeighT
this.topArr = topArr; this.topArr = topArr;
/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */ /* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
let last = res[res.length - 1].height; let last = res[res.length - 1].height;
if (last - 20 < this.scrollHeight) { if (last - 20 < this.scrollHeight) {
@@ -879,28 +865,43 @@
}, },
/* 主区域滚动监听 */ /* 主区域滚动监听 */
mainScroll(e) { mainScroll(e) {
// 节流方法
clearTimeout(this.mainThrottle);
this.mainThrottle = setTimeout(() => {
scrollFn();
}, 10);
let scrollFn = () => {
let top = e.detail.scrollTop;
let index = 0;
/* 查找当前滚动距离 */
for (let i = (this.topArr.length - 1); i >= 0; i--) {
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
if ((top + 2) >= this.topArr[i] - this.scrollTopSize) {
index = i;
break;
}
}
this.leftIndex = (index < 0 ? 0 : index);
}
}, },
/* 左侧导航点击 */ /* 左侧导航点击 */
leftTap(e,index) { leftTap(e) {
try { try {
this.leftIndex = (index < 0 ? 0 : index);
if (this.isFixed) { if (this.isFixed) {
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: this.scrollTopSize, //滑动需要的距离 nav+列表距离的高度 scrollTop: this.scrollTopSize + this.HeighT, //滑动需要的距离 nav+列表距离的高度
duration: 100 duration: 100
}); });
this.isFixed = false this.isFixed = false
} }
} catch (e) { } catch (e) {
//TODO handle the exception //TODO handle the exception
} }
setTimeout(() => { setTimeout(() => {
let index = e.currentTarget.dataset.index; let index = e.currentTarget.dataset.index;
this.scrollInto = `item-${index}`; this.scrollInto = `item-${index}`;
},) }, 300)
} }
} }
} }
@@ -920,9 +921,11 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
align-content: flex-start; align-content: flex-start;
.navbarcontent .active{
.navbarcontent .active {
background-color: #fff; background-color: #fff;
} }
&>view { &>view {
width: 100%; width: 100%;
} }
@@ -1140,39 +1143,42 @@
} }
.bottom-panel {
padding-bottom: 0; .shop-info-wrap {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.shop-info-wrap{
padding: 0 30rpx 50rpx; padding: 0 30rpx 50rpx;
box-sizing: border-box; box-sizing: border-box;
.info-wrap{
.info-wrap {
padding: 30rpx 0; padding: 30rpx 0;
box-sizing: border-box; box-sizing: border-box;
.shopName{
.shopName {
align-self: center; align-self: center;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
} }
.info-wrap-title{
.info-wrap-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.row{
.col{ .row {
.col {
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.l,.t{
.l,
.t {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
} }
} }
} }
.shop_sku { .shop_sku {
width: 100%; width: 100%;
position: relative; position: relative;
@@ -1181,6 +1187,7 @@
overflow-y: auto; overflow-y: auto;
padding-bottom: 320rpx; padding-bottom: 320rpx;
box-sizing: border-box; box-sizing: border-box;
.positionabsolute { .positionabsolute {
position: absolute; position: absolute;
top: 30rpx; top: 30rpx;
@@ -1189,7 +1196,7 @@
.shop_skucimage { .shop_skucimage {
width: 100%; width: 100%;
height: 500rpx!important; height: 500rpx !important;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
} }
@@ -1200,12 +1207,14 @@
font-size: 32upx; font-size: 32upx;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
.shop_sku_returned { .shop_sku_returned {
padding: 0 $paddingSize; padding: 0 $paddingSize;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #FF534B; color: #FF534B;
} }
.shop_sku_description { .shop_sku_description {
padding: 0 $paddingSize; padding: 0 $paddingSize;
font-weight: 400; font-weight: 400;
@@ -1274,10 +1283,11 @@
box-sizing: border-box; box-sizing: border-box;
padding: 30rpx $paddingSize; padding: 30rpx $paddingSize;
background-color: #fff; background-color: #fff;
box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0,0,0,0.1); box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
.price { .price {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@@ -1310,7 +1320,8 @@
} }
.addShopping{
.addShopping {
width: 100%; width: 100%;
height: 96rpx; height: 96rpx;
line-height: 96rpx; line-height: 96rpx;
@@ -1322,7 +1333,8 @@
color: #FFFFFF; color: #FFFFFF;
margin-top: 36rpx; margin-top: 36rpx;
} }
.addShopping.active{
.addShopping.active {
background: #E8AD7B; background: #E8AD7B;
} }
} }
@@ -1342,36 +1354,40 @@
align-items: center; align-items: center;
height: 128rpx; height: 128rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0,0,0,0.15); box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.15);
border-radius: 58rpx; border-radius: 58rpx;
padding: 0 36rpx; padding: 0 36rpx;
box-sizing: border-box; box-sizing: border-box;
.left { .left {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
.iconBox{
.iconBox {
position: relative; position: relative;
} }
.icon { .icon {
width: 76rpx; width: 76rpx;
height: 88rpx; height: 88rpx;
margin-left: 22rpx; margin-left: 22rpx;
} }
.u-badge{
.u-badge {
position: absolute; position: absolute;
top: -30rpx; top: -30rpx;
right: -30rpx; right: -30rpx;
background-color: #FF4B33; background-color: #FF4B33;
color: #fff; color: #fff;
border-radius: 58rpx; border-radius: 58rpx;
padding: 5rpx 14rpx; padding: 5rpx 14rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20rpx; font-size: 20rpx;
} }
.i, .i,
@@ -1395,16 +1411,18 @@
.btn { .btn {
width: 160rpx; width: 160rpx;
height: 64rpx; height: 64rpx;
background: #E7AE7B; background: #FEFAF7;
border-radius: 36rpx 36rpx 36rpx 36rpx; border-radius: 36rpx 36rpx 36rpx 36rpx;
border: 2rpx solid #E8AD7B; border: 2rpx solid #E8AD7B;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-end;
.t{
.t {
font-weight: bold; font-weight: bold;
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #E8AD7B;
margin-right: 26rpx;
} }
} }
} }
@@ -1419,11 +1437,13 @@
justify-content: space-between; justify-content: space-between;
padding: 20upx $paddingSize; padding: 20upx $paddingSize;
border-radius: 20upx 20upx 0 0; border-radius: 20upx 20upx 0 0;
.num{
.num {
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
} }
.clear { .clear {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1444,6 +1464,7 @@
.list-wrap { .list-wrap {
padding: $paddingSize 0 0 $paddingSize; padding: $paddingSize 0 0 $paddingSize;
} }
.shop-item { .shop-item {
display: flex; display: flex;
padding-bottom: $paddingSize; padding-bottom: $paddingSize;
@@ -1495,19 +1516,19 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.i,.num{ .i,
.num {
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
} }
.i { .i {
position: relative; position: relative;
bottom: 4upx; bottom: 4upx;
} }
.num { .num {}
}
} }
.sku-wrap { .sku-wrap {
@@ -1586,6 +1607,7 @@
box-sizing: border-box; box-sizing: border-box;
font-size: 32rpx; font-size: 32rpx;
// padding-bottom: 200rpx;
.item { .item {
padding: 0 30rpx; padding: 0 30rpx;
height: 92rpx; height: 92rpx;
@@ -1594,9 +1616,7 @@
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
color: #333333; color: #333333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&+.item { &+.item {
margin-top: 1px; margin-top: 1px;
@@ -1629,6 +1649,7 @@
height: 100%; height: 100%;
width: 0; width: 0;
} }
&::after { &::after {
content: ''; content: '';
display: block; display: block;
@@ -1685,6 +1706,7 @@
justify-content: flex-start; justify-content: flex-start;
align-content: center; align-content: center;
position: relative; position: relative;
&+.goods { &+.goods {
margin-top: 16rpx; margin-top: 16rpx;
} }
@@ -1695,13 +1717,15 @@
margin-right: 18rpx; margin-right: 18rpx;
margin-left: 2px; margin-left: 2px;
} }
.goodsImg{
.goodsImg {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 18rpx; border-radius: 18rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.topSort{
.topSort {
width: 92rpx; width: 92rpx;
height: 38rpx; height: 38rpx;
text-align: center; text-align: center;
@@ -1715,17 +1739,20 @@
border-radius: 20rpx 0rpx 20rpx 0rpx; border-radius: 20rpx 0rpx 20rpx 0rpx;
} }
.topSort.c1{
.topSort.c1 {
background: #FC5C2E; background: #FC5C2E;
} }
.topSort.c2{
.topSort.c2 {
background: #EF994E; background: #EF994E;
} }
.topSort.c3{
.topSort.c3 {
background: #F4B951; background: #F4B951;
} }
.goods_right{ .goods_right {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1733,27 +1760,24 @@
padding-top: 5rpx; padding-top: 5rpx;
padding-right: 20rpx; padding-right: 20rpx;
box-sizing: border-box; box-sizing: border-box;
.name{
.name {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.describe,.monthlySale,.lookBack { .describe,
.monthlySale,
.lookBack {
font-weight: 400; font-weight: 400;
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.describe,.name{
width: 270rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lookBack{ .lookBack {
color: #FF534B; color: #FF534B;
} }
@@ -1761,19 +1785,21 @@
font-weight: bold; font-weight: bold;
font-size: 24rpx; font-size: 24rpx;
color: #333; color: #333;
.money_num{
.money_num {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
} }
.suit{
font-weight: 400; .suit {
font-size: 24rpx; font-weight: 400;
color: #666666; font-size: 24rpx;
color: #666666;
} }
.sku-wrap{ .sku-wrap {
width: 138rpx; width: 138rpx;
height: 54rpx; height: 54rpx;
background: #E3AD7F; background: #E3AD7F;
@@ -1783,10 +1809,12 @@
// right: 20rpx; // right: 20rpx;
align-items: center; align-items: center;
position: relative; position: relative;
.t{
.t {
font-size: 28rpx; font-size: 28rpx;
color: #fff; color: #fff;
} }
.dot { .dot {
position: absolute; position: absolute;
top: -15rpx; top: -15rpx;
@@ -1803,14 +1831,15 @@
} }
} }
.Controls{ .Controls {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
// position: absolute; // position: absolute;
// bottom: 10rpx; // bottom: 10rpx;
// right: 20rpx; // right: 20rpx;
.num{ .num {
margin: auto 8rpx; margin: auto 8rpx;
} }
} }

0
pages/user/repairpassword - 副本.vue → pages/user/repairpasswordtwo.vue
View File