product_platform/yxt-yythmall-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
wong1988
2024-01-19 19:16:44 +08:00
parent 119a17f02b
commit 99ff039fb9
1 changed files with 145 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
pages/home/cloudCard2.vue
View File

@@ -4,23 +4,39 @@
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
<!-- <view style="background: #F7F7F7; opacity: 0.5; border-radius: 20px;display: flex;flex-direction: row;align-items: center;
padding-left: 10px; margin-left: 20px;width: 40vw; margin-top: 5vh;">
<image src="../../static/search_icon.png" mode="aspectFill" style="width: 25px;height: 25px;">
</image>
<input placeholder="搜索"
style="font-size: 25rpx;flex: 1;height: 35px;line-height: 35px;padding-left: 10px;padding-right: 10px;"
:value="searchInfo.name" @input="onKeyInput" />
</view> -->
</view>
<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;;
padding-left: 10vw;padding-right: 10vw; margin-top: 40vw;">
<view style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center;"
<view
style="background: #fff; height: calc(100vh - 45px - 50vw);width: 100%; border-radius: 15px;display: flex;flex-direction: column; box-sizing: border-box;margin-top: -15px;box-sizing: border-box;">
<view class="center">
<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
<view style="width: 100%;display: flex;flex-direction: column; ">
<view v-for="(item,index) in data" @click="labelClick(index,item)"
style="display: flex;flex-direction: column;justify-content: center;">
<text class="label" :class="{'label2':selectIndex==index}">{{item.name}}</text>
</view>
</view>
</view>
<view style="width: 78%;background-color: #fff;overflow-y: auto;">
<view style="z-index: 1;background: #FFFFFF;position: sticky;top: 0;padding: 10px;">
<view style="display: flex;flex-direction: row;overflow-x: auto;">
<view v-for="(item,index) in 100"
style="display: flex;flex-direction: column; justify-content: center;align-items: center;margin-right: 10px;"
@click.stop="brandClick('0')">
<image src="https://supervise.yxtsoft.com/lpk/image/family_icon.png" mode="aspectFill"
@@ -31,77 +47,14 @@
</view>
<view style="display: flex;flex-direction: column;flex: 1;justify-content: center;align-items: center;"
@click.stop="brandClick('1')">
<image src="https://supervise.yxtsoft.com/lpk/image/love_icon.png" mode="aspectFill"
:class="brandType=='1'?'top_img1':'top_img2'"
style="width: 60px;height: 60px;border-radius: 50%;padding: 5px;"></image>
<text :class="brandType=='1'?'top_text1':'top_text2'">精品菜窖</text>
</view>
<view style="display: flex;flex-direction: column;flex: 1;justify-content: center;align-items: center;"
@click.stop="brandClick('2')">
<image src="https://supervise.yxtsoft.com/lpk/image/enterprise_icon.png" mode="aspectFill"
:class="brandType=='2'?'top_img1':'top_img2'"
style="width: 60px;height: 60px;border-radius: 50%;padding: 5px;"></image>
<text :class="brandType=='2'?'top_text1':'top_text2'">企业菜窖</text>
</view>
</view>
<view style="width: 100%; display: flex;flex-direction: column;overflow-y: auto;">
</view>
<view style="background: #fff;flex-flow: 1; height: calc(100vh - 65vw - 50px);
width: 100%; margin-top: -13vw;
border-radius: 25px;display: flex;flex-direction: column; box-sizing: border-box;">
<view style="display: flex;flex-direction: row;height: 25px; width: 100%; flex-shrink: 0;">
<view style="width: 20%;background: #F7F7F7;border-top-left-radius: 25px;"></view>
<view style="width: 80%;background: #fff; border-top-right-radius: 25px;"></view>
</view>
<view style="display: flex;flex-direction: row;min-height: calc(100% - 115px); ">
<scroll-view scroll-y="true" style="height: 100%; width: 21%;border-bottom-left-radius: 25px;"
:scroll-top="scrollLeftTop" bindscrolltoupper="upper" bindscrolltolower="lower"
:show-scrollbar="false" :enhanced="true" bindscroll="scroll">
<view
style="width: 100%;; display: flex;flex-direction: column; background: #F7F7F7;border-bottom-left-radius: 25px;">
<view v-for="(item,index) in data" @click="labelClick(index,item)"
style="display: flex;flex-direction: column;justify-content: center; margin-top: 15px; ">
<text class="label" :class="{ label2: selectIndex==index }">{{item.name}}</text>
</view>
</view>
</scroll-view>
<view
style="width: 80%;min-height: calc(100% - 115px); display: flex;flex-direction: column; margin-left: 10px; margin-right: 10px;">
<view style=" border: 1px #bbb solid; border-radius: 8px;display: flex;flex-direction: row;align-items: center;
padding-left: 10px; margin-left: 20px;margin-right: 20px;">
<image src="../../static/search_icon.png" mode="aspectFill" style="width: 25px;height: 25px;">
</image>
<input placeholder="请输入"
style="font-size: 25rpx;flex: 1;height: 35px;line-height: 35px;padding-left: 10px;padding-right: 10px;"
:value="searchInfo.name" @input="onKeyInput" />
</view>
<scroll-view scroll-y="true" style="min-height: calc(100% - 150px); width: 100%; margin-top: 10px;"
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" :show-scrollbar="false"
:scroll-top="scrollRightTop" :enhanced="true">
<view style="width: 100%; display: flex;flex-direction: column;">
<view v-for="(item,index) in goods" @click="itemClick(item.goodsSid)"
style="display: flex;flex-direction: column;justify-content: center;width: 100%; margin-top: 15px; ">
style="display: flex;flex-direction: column;justify-content: center;width: 95%; margin-top: 15px; margin-left: 3%;">
<view style="display: flex;flex-direction: row;align-items: center;width: 100%; ">
@@ -114,8 +67,7 @@
<text style="font-size: 13px;color: #000;">{{item.name}}</text>
<text
style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text>
<text style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text>
<view
style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
@@ -124,17 +76,12 @@
<text
style="border: 1px #EE752F solid; border-radius: 5px; padding: 0px 8px;
font-size: 10px;color: #EE752F; margin-left: 10px; margin-right: 10px; ">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text>
<!-- <text
style="background: #FF9900; color: #fff; font-size: 10px;padding: 0px 8px; border-radius: 5px;">￥{{item.mefenPrice}}</text> -->
</view>
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px;
margin-right: 15px;">
<text style="font-size: 14px;color: #FF5006;">￥{{item.mefenPrice}}</text>
<!--
<image src="../../static/inCart.png" mode="aspectFill"
style="width: 25px;height: 25px;" @click.stop="itemShow(item)"
v-if="!item.showCart"></image> -->
<view style="display: flex;flex-direction: row;align-items: center;">
@@ -146,9 +93,7 @@
<image src="../../static/jia_icon.png" mode="aspectFill"
style="width: 20px;height: 20px;" @click.stop="jia(item)"></image>
<!-- <text
style="margin-left: 10px;color: #fff; font-size: 12px; border: 1px #EE752F solid; border-radius: 5px; padding: 0px 5px; background: #FF9900;"
@click.stop="itemShow2(item)">确定</text> -->
</view>
</view>
</view>
@@ -160,14 +105,10 @@
</view>
</view>
</scroll-view>
</view>
</view>
<view style="display: flex;flex-direction: column;border-top: 1px solid #F8F8F8; border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;
padding-top: 5px; flex-shrink: 0;">
<view class="bottom">
<view style="display: flex;flex-direction: row;align-items: center; padding-left: 30px;">
<view style="width: 35px;height: 35px;position: relative; visibility: hidden; ">
@@ -186,43 +127,39 @@
<view id="bomView"
style="display: flex;flex-direction: row;align-items: center; margin-left: 15px;">
<view style="color: #888;font-size: 10px;">温馨提示：已定制了</view>
<view style="color: #FF5006;font-size: 15px;">{{page.weight}}斤</view>
<!-- <view style="color: #FF5006;font-size: 15px;" v-if="brandType=='1'">{{page.weight2}}斤</view> -->
<!-- <view style="color: #FF5006;font-size: 15px;" v-if="brandType=='2'">{{page.weight3}}斤</view> -->
<view style="color: #888;font-size: 10px;">，满200斤可定制云菜窖</view>
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
温馨提示：已定制了</view>
<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;">
{{page.weight}}斤
</view>
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
，满200斤可定制云菜窖</view>
</view>
</view>
<view
style="display: flex;flex-direction: row; justify-content: center;align-items: center;padding-bottom: 10px;margin-top: 5px;">
style="display: flex;flex-direction: row; justify-content: center;align-items: center;padding-bottom: 10px;margin-top: 5px;padding: 0px 10px;">
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 8px 15px;
border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;">分享新人有礼</text>
<text
style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;flex-shrink: 0;">分享新人有礼</text>
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 5px 10px;
display: flex;flex-direction: row;align-items: center;" @click="gotoCart()">
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 0px 10px;height: 42px;flex: 1;
display: flex;flex-direction: row;align-items: center;box-sizing: border-box;" @click="gotoCart()">
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
style="height: 20px;width: 25px;"></image>
<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price}}</text>
<text style="font-size: 10px;color: #666;margin-left: 10px; ">共减：￥{{page.reduce}}</text>
style="height: 20px;width: 20px;flex-shrink: 0;">
</image>
<view style="display: flex;flex-direction: column;flex: 1;">
<text
style="font-size: 15px;color: #FF5006;margin-left: 10px;height: 20px;line-height: 20px;margin-top: 5px;font-weight: bold;">￥{{page.price}}</text>
<text
style="font-size: 10px;color: #666;margin-left: 10px; height: 10px;line-height: 10px;margin-bottom: 5px;">共减：￥{{page.reduce}}</text>
</view>
<!-- <view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 5px 10px;
display: flex;flex-direction: row;align-items: center;" v-if="brandType=='1'">
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
style="height: 20px;width: 25px;"></image>
<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price2}}</text>
<text style="font-size: 10px;color: #666;margin-left: 10px; ">共减：￥{{page.reduce2}}</text>
</view>
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 5px 10px;
display: flex;flex-direction: row;align-items: center;" v-if="brandType=='2'">
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
style="height: 20px;width: 25px;"></image>
<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price3}}</text>
<text style="font-size: 10px;color: #666;margin-left: 10px; ">共减：￥{{page.reduce3}}</text>
</view> -->
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 8px 15px;
border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;"
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;flex-shrink: 0;"
@click="settlement()">结算</text>
</view>
@@ -232,14 +169,12 @@
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="base" title="订购协议" :showConfirm="true"
:beforeClose="dialogBeforeClose" @confirm="dialogInputConfirm" :content="dialogContent"
:confirm-text="confirmText"></uni-popup-dialog>
</uni-popup>
</view>
</template>
@@ -353,6 +288,7 @@
request() {
let _this = this
_this.$api.getAllGoodsType(_this.brandType).then((resp) => {
console.log("------------", resp);
_this.data = resp
_this.searchInfo.sid = _this.data[0].sid
_this.selectIndex = 0
@@ -660,31 +596,57 @@
.top {
width: 100vw;
/* height: 126.66vw; */
height: 75vw;
height: 50vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png);
background-image: url(https://supervise.yxtsoft.com/lpk/image/banner.png);
/* background-image: url(../../static/clound_bj1.png); */
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.center {
display: flex;
flex-direction: row;
flex: 1;
background-color: #f7f7f7;
border-radius: 15px;
overflow: hidden;
min-width: 0;
}
.bottom {
display: flex;
flex-direction: column;
border-top: 1px solid #F8F8F8;
padding-top: 5px;
flex-shrink: 0;
margin-bottom: 10px;
}
.label {
background: #fff;
color: #FF9900;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
color: #191919;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 5px;
}
.label2 {
background: #FF9900;
color: #fff;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
background: #FFF;
color: #FFF;
background-color: #FF9900;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
font-weight: bold;
border-radius: 20px;
margin-left: 5px;
}
.top_img1 {
@@ -701,9 +663,12 @@
color: #fff;
font-weight: 800;
font-family: sans-serif;
padding: 2px 5px;
padding: 5px 16px;
border-radius: 5px;
margin-top: -25px;
font-size: 13px;
word-break: keep-all;
white-space: nowrap;
}
.top_text2 {
@@ -711,9 +676,18 @@
background: #fff;
color: #F6894B;
font-weight: 800;
padding: 5px 16px;
font-family: sans-serif;
padding: 2px 5px;
border-radius: 5px;
margin-top: -25px;
font-size: 13px;
word-break: keep-all;
white-space: nowrap;
}
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
</style>