mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面修改

Browse Source
This commit is contained in:
THK3121 2023-09-12 20:14:56 +08:00
parent 055e3845f3
commit 50f3fc7a2d
3 changed files with 131 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
pages/nongKe/cloud_entrepot/index.vue
View File

@ -22,7 +22,7 @@
<!-- <view :style="`height: ${appInfo.top}px;background-color: red;z-index: 99999;`"></view> --> <!-- <view :style="`height: ${appInfo.top}px;background-color: red;z-index: 99999;`"></view> -->
<!-- <transition name="fade"> --> <!-- <transition name="fade"> -->
<view :class="{'head':true,'show':showtit}" style="padding-top: var(--status-bar-height);" <view :class="{'head':true,'show':showtit}" style="padding-top: var(--status-bar-height);"
v-show="showtit"> v-if="showtit">
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx" <u--image :showLoading="true" src="/static/images/LHYC/FH.png" width="50.82rpx"
height="50.82rpx" @click='goBack'></u--image> height="50.82rpx" @click='goBack'></u--image>
@ -39,8 +39,7 @@
<!-- </transition> --> <!-- </transition> -->
<!-- <transition name="fade"> --> <!-- <transition name="fade"> -->
<!-- 滚动 --> <!-- 滚动 -->
<view :class="{'heads':true,'show':!showtit}" style="padding-top: var(--status-bar-height);" <view :class="{'heads':true,'show':!showtit}" style="padding-top: var(--status-bar-height);">
v-show="!show">
<view style="align-items: center;display: flex;justify-content: space-between;"> <view style="align-items: center;display: flex;justify-content: space-between;">
<view class="" style="display: flex;align-items: center;"> <view class="" style="display: flex;align-items: center;">
<view class="back" style="margin-right: 17rpx;"> <view class="back" style="margin-right: 17rpx;">
@ -86,12 +85,11 @@
<!-- <u--image :showLoading="true" src="/static/images/LHYC/BG.png" width="750rpx" <!-- <u--image :showLoading="true" src="/static/images/LHYC/BG.png" width="750rpx"
height="998.83rpx"></u--image> --> height="998.83rpx"></u--image> -->
<view class="menu" style="z-index: 999;" v-if="showtit"> <view class="menu" v-if="showtit" style="transition: 1s;">
<swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swiper" <swiper :autoplay="false" :active-class="activeClass" :interval="3000" class="swiper"
:circular="true" previous-margin='270rpx' next-margin='270rpx' :current="current" :circular="true" previous-margin='270rpx' next-margin='270rpx' :current="current"
@change="test"> @change="test">
<!-- :class="{active_swiper:index==current}" --> <swiper-item v-for="(item,index) in cloudList" :key="index" @click="clickSwiperFn(index)">
<swiper-item v-for="(item,index) in cloudList" :key="index">
<view class="swiper_item" :class="{swiper_item_act:index==current}"> <view class="swiper_item" :class="{swiper_item_act:index==current}">
<u--image :showLoading="true" :src="item.background" class="swiper_b" <u--image :showLoading="true" :src="item.background" class="swiper_b"
width="175.23rpx" height="175.23rpx"></u--image> width="175.23rpx" height="175.23rpx"></u--image>
@ -139,13 +137,22 @@
</view> </view>
</view> </view>
<!-- :style="{'transform': `translateY(${trnList[index].bottom}) translateX(${trnList[index].left})`,'transition':'1s'}" --> <!-- :style="{'transform': `translateY(${trnList[index].bottom}) translateX(${trnList[index].left})`,'transition':'1s'}" -->
<view class="good_price_r" @click.stop="addcart(item)"> <!-- <view class="good_price_r" @click.stop="addcart(item)">
<u--image :class="'act_class'+index" class="act_class" <u--image :class="'act_class'+index" class="act_class"
:showLoading="true" src="/static/images/LHYC/J.png" :showLoading="true" src="/static/images/LHYC/J.png"
width="49.07rpx" height="49.07rpx"></u--image> width="49.07rpx" height="49.07rpx"></u--image>
<!-- <u--image class="act_class" :showLoading="true"
src="/static/images/LHYC/J.png" width="49.07rpx" </view> -->
height="49.07rpx"></u--image> --> <view class="good_price_r">
<view :class="{x_tra:trnList[index].bottom }"
:style="`transform:translateY(${trnList[index].bottom}px);transition:${trnList[index].bottom?1:0}s cubic-bezier(0.4, -0.9, 0.75, 1);`"
@click.stop="addcart(item,index)">
<u--image :class="'act_class'+index"
:style="`transform:translateX(${trnList[index].left}px);transition:${trnList[index].bottom?1:0}s `"
src="/static/images/LHYC/J.png" width="49.07rpx"
height="49.07rpx"></u--image>
</view>
</view> </view>
</view> </view>
@ -162,6 +169,10 @@
<view class="info"> <view class="info">
<u--image :showLoading="true" src="/static/images/noCart.png" width="400.09rpx" <u--image :showLoading="true" src="/static/images/noCart.png" width="400.09rpx"
height="400.09rpx"></u--image> height="400.09rpx"></u--image>
<view class="" style="text-align: center;">
暂无商品
</view>
</view> </view>
</view> </view>
</view> </view>
@ -230,6 +241,10 @@
<view class="info"> <view class="info">
<u--image :showLoading="true" src="/static/images/noCart.png" width="400.09rpx" <u--image :showLoading="true" src="/static/images/noCart.png" width="400.09rpx"
height="400.09rpx"></u--image> height="400.09rpx"></u--image>
<view class="" style="text-align: center;">
暂无商家
</view>
</view> </view>
</view> </view>
@ -389,6 +404,10 @@
// }, // },
methods: { methods: {
clickSwiperFn(i) {
// console.log(i)
this.current = i
},
cartFn() { cartFn() {
getCartList().then(res => { getCartList().then(res => {
console.log(res) console.log(res)
@ -464,19 +483,38 @@
}).then(res => { }).then(res => {
this.goodsList = res.data.list this.goodsList = res.data.list
this.showLoading = false this.showLoading = false
this.goodsList.forEach(item => {
this.trnList.push({
left: 0,
bottom: 0
})
})
}) })
}, },
addcart(i) { addcart(item, i) {
let data = { let data = {
cart_num: 1, cart_num: 1,
is_new: 0, is_new: 0,
product_attr_unique: i.sku[''].unique, product_attr_unique: item.sku[''].unique,
product_id: i.product_id, product_id: item.product_id,
product_type: i.product_type, product_type: item.product_type,
spread_id: "", spread_id: "",
} }
let that = this let that = this
// return
uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => {
that.trnList[i].left = this.cartTagInfo.left - data1.left;
that.trnList[i].bottom = this.cartTagInfo.top - data1.top;
console.log(that.trnList[i])
let timer = setTimeout(() => {
that.trnList[i].left = 0
that.trnList[i].bottom = 0
}, 1000)
}).exec();
let res = postCartAdd({ let res = postCartAdd({
...data ...data
}).then((res, err) => { }).then((res, err) => {
@ -547,6 +585,18 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes addcart {
from {
// background-color: red;
opacity: 1,
}
to {
// background-color: yellow;
opacity: 0,
}
}
.flags { .flags {
background-color: red; background-color: red;
z-index: 99999999; z-index: 99999999;
@ -589,11 +639,13 @@
.content { .content {
width: 100vw; width: 100vw;
// transform: translateY(-100px);
border-radius: 50rpx 50rpx 0 0;
// position: absolute; // position: absolute;
// top: 965rpx; // top: 965rpx;
// border-top: 5px solid red; // border-top: 5px solid red;
z-index: 99; z-index: 9999;
background-color: #F4F4F4; background-color: white;
// padding: 0 10rpx; // padding: 0 10rpx;
} }
@ -723,7 +775,7 @@
width: 100%; width: 100%;
padding: 0 20rpx; padding: 0 20rpx;
align-items: center; align-items: center;
transition: .3s; transition: .5s;
@ -735,7 +787,7 @@
color: white; color: white;
width: 100%; width: 100%;
padding: 0 20rpx; padding: 0 20rpx;
transition: .3s; transition: 1s;
opacity: 0; opacity: 0;
} }
@ -747,7 +799,7 @@
position: absolute; position: absolute;
top: 748rpx; top: 748rpx;
width: 750rpx; width: 750rpx;
background-color: rgba(255, 255, 255, 0.7); // background-color: rgba(255, 255, 255, 0.7);
height: 250rpx; height: 250rpx;
// height: 175.23rpx; // height: 175.23rpx;
// box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.5); // box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.5);
@ -826,7 +878,7 @@
} }
.act_swiper { .act_swiper {
// height: 500rpx; height: 200rpx;
position: fixed; position: fixed;
z-index: 99; z-index: 99;
overflow: hidden; overflow: hidden;
@ -834,7 +886,10 @@
.act_img { .act_img {
// transition:t; // transition:t;
transform: translateY(-840rpx);
/* #ifdef APP-PLUS */
transform: translateY(-800rpx); transform: translateY(-800rpx);
/* #endif */
} }
@ -845,9 +900,11 @@
.content_sift { .content_sift {
width: 750rpx; width: 750rpx;
padding: 22rpx 0; padding: 22rpx 0;
// padding-top: 80rpx;
background-color: white;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
background-color: white; // background-color: white;
// background-color: green; // background-color: green;
z-index: 99; z-index: 99;
box-sizing: border-box; box-sizing: border-box;
@ -904,10 +961,14 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
background-color: red; background-color: #F84221;
transform: translate(50%, -50%); transform: translate(50%, -50%);
padding: 0 10rpx; // padding: 10rpx 10rpx;
border-radius: 30rpx; border-radius: 35rpx;
text-align: center;
width: 35rpx;
line-height: 35rpx;
height: 35rpx;
} }
.cloud_entrepot { .cloud_entrepot {
@ -1024,4 +1085,16 @@
.cart { .cart {
z-index: 999; z-index: 999;
} }
.x_tra {
// position: relative;
z-index: 999999;
animation-name: addcatr;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards; // animation-iteration-count: 1;
/* 设置为1 */
// transition: 1s cubic-bezier(0.5, -0.5, 1, 1);
}
</style> </style>

91
pages/nongKe/cloud_entrepot/indexa.vue
View File

@ -133,27 +133,17 @@
￥30.00 ￥30.00
</view> </view>
</view> </view>
<!-- :style="{'transform': `translateY(${trnList[index].bottom}) translateX(${trnList[index].left})`,'transition':'1s'}" --> <view class="good_price_r" ref="container">
<!-- <view class="good_price_r" @click.stop="addcart(item)"> <view :class="{x_tra:trnList[index].bottom }"
<u--image :class="'act_class'+index" class="act_class" :style="`transform:translateY(${trnList[index].bottom}px);transition:${trnList[index].bottom?1:0}s cubic-bezier(0.4, -0.9, 0.75, 1);`"
:showLoading="true" src="/static/images/LHYC/J.png" @click.stop="addcart(index)">
width="49.07rpx" height="49.07rpx"></u--image> <u--image :class="'act_class'+index"
:style="`transform:translateX(${trnList[index].left}px);transition:${trnList[index].bottom?1:0}s `"
</view> -->
<div class="good_price_r" @click.stop="addcart(index)" ref="container">
<!-- transform:translateY(${trnList[index].bottom});transition: 1s cubic-bezier(0.5, -0.5, 1, 1); -->
<!-- :style="`transform:translateX(${trnList[index].left})`" -->
<!-- :class="{x_tra:trnList[index].bottom}" -->
<div :class="{x_tra:trnList[index].bottom }"
:style="`transform:translateY(${trnList[index].bottom});transition: 0.75s cubic-bezier(0.5, -0.5, 1, 1);`">
<u--image :class="'act_class'+index" class="act_class"
:style="`transform:translateX(${trnList[index].left})`"
src="/static/images/LHYC/J.png" width="49.07rpx" src="/static/images/LHYC/J.png" width="49.07rpx"
height="49.07rpx"></u--image> height="49.07rpx"></u--image>
</div> </view>
</view>
</div>
</view> </view>
</view> </view>
@ -275,6 +265,9 @@
import { import {
postCartAdd, postCartAdd,
} from '@/api/store.js'; } from '@/api/store.js';
import {
times
} from '../../../uni_modules/uview-ui/libs/function/digit';
export default { export default {
data() { data() {
let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13'; let src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/13';
@ -286,7 +279,7 @@
pocls: "", pocls: "",
type: "", type: "",
act_swiper: "", act_swiper: "",
current: 1, current: 3,
goodsNum: 0, goodsNum: 0,
goodsList: [], goodsList: [],
winHeight: 0, winHeight: 0,
@ -472,13 +465,18 @@
}) })
}, },
addcarts(i) { addcart(i) {
let that = this let that = this
// return // return
console.log(i)
uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => { uni.createSelectorQuery().in(this).select(`.act_class${i}`).boundingClientRect(data1 => {
that.trnList[i].left = this.cartTagInfo.left - data1.left + 'px'; that.trnList[i].left = this.cartTagInfo.left - data1.left;
that.trnList[i].bottom = this.cartTagInfo.top - data1.top + 'px'; that.trnList[i].bottom = this.cartTagInfo.top - data1.top;
console.log(that.trnList[i]) console.log(that.trnList[i])
timer = setTimeout(() => {
that.trnList[i].left = 0
that.trnList[i].bottom = 0
}, 1000)
}).exec(); }).exec();
// console.log(this.$refs.jia1[i]) // console.log(this.$refs.jia1[i])
// return // return
@ -560,52 +558,17 @@
}) })
}) })
}) })
// console.log(this.cloudList) console.log("sad", this.trnList)
data.length < 1 ? Toast("暂无云仓") : ''; data.length < 1 ? Toast("暂无云仓") : '';
} }
} }
} }
</script> </script>
<script module='renderjs' lang="renderjs">
export default {
data() {
return {
}
}
,
render(h) {
// 渲染函数
return h('div', {
on: {
click: this.addcart, // 绑定点击事件
},
}, 'Click me');
},
methods: {
addcart(i) {
console.log(7878)
return
var divElement = document.createElement('div');
// 设置div的样式
divElement.style.width = '200px';
divElement.style.height = '200px';
divElement.style.backgroundColor = 'red';
// 添加文本内容
divElement.textContent = 'Hello, Uni-App!';
// 获取容器元素的引用
var container = this.$refs.container;
// 将div元素添加到容器中
container[i].appendChild(divElement);
}
}
}
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes addcatr { @keyframes addcatr {
0% { 0% {
@ -618,6 +581,8 @@
100% { 100% {
opacity: 0; opacity: 0;
// top: ;
} }
} }
@ -679,9 +644,7 @@
padding-top: 200rpx; padding-top: 200rpx;
} }
.act_class {
transition: 0.5s;
}
// .act_class:active { // .act_class:active {
// transform: scale(2); // transform: scale(2);
@ -848,7 +811,7 @@
.good_price_r { .good_price_r {
z-index: 9; z-index: 9;
transition: 1s linear; // transition: 1s linear;
} }
.good_price_l { .good_price_l {
@ -950,8 +913,10 @@
} }
.x_tra { .x_tra {
// position: relative;
z-index: 999999;
animation-name: addcatr; animation-name: addcatr;
animation-duration: .75s; animation-duration: 1s;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
animation-iteration-count: 1; animation-iteration-count: 1;
animation-fill-mode: forwards; // animation-iteration-count: 1; animation-fill-mode: forwards; // animation-iteration-count: 1;

11
pages/order_addcart/order_addcart.vue
View File

@ -113,8 +113,8 @@
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view> </view>
</view> </view>
<view class='footer acea-row row-between-wrapper' :style="`bottom:${appInfo.bottom+40}px`" <view class='footer acea-row row-between-wrapper' :class="isFooter?'':'on'"
:class="isFooter?'':'on'" v-if="cartList.valid.length > 0"> v-if="cartList.valid.length > 0">
<view> <view>
<view class="allcheckbox" @click.stop="checkboxAllChange"> <view class="allcheckbox" @click.stop="checkboxAllChange">
<text v-if="!isAllSelect" class="iconfont icon-weixuanzhong"></text> <text v-if="!isAllSelect" class="iconfont icon-weixuanzhong"></text>
@ -1221,9 +1221,10 @@
padding: 0 30rpx; padding: 0 30rpx;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #eee; border-top: 1px solid #eee;
bottom: 40px; bottom: 0px;
bottom: calc(40px + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/ padding-bottom: 150rpx;
bottom: calc(40px + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/ padding-top: 30rpx;
} }
.shoppingCart .footer.on { .shoppingCart .footer.on {