feat: 小程序界面优化
This commit is contained in:
@@ -14,13 +14,13 @@
|
||||
<view class="remain-count"> 剩余抽奖次数: {{ prizesObj.times }} </view>
|
||||
|
||||
<!-- 九宫格抽奖组件 -->
|
||||
<!-- <LotteryGrid
|
||||
<LotteryGrid
|
||||
:prizesObj="prizesObj"
|
||||
:remainCount="prizesObj.times"
|
||||
:is-disabled="isRotating"
|
||||
@start="handleStartLottery"
|
||||
@complete="handleLotteryComplete"
|
||||
/> -->
|
||||
/>
|
||||
<view class="notice-view">
|
||||
<view class="notice-li">
|
||||
<u-notice-bar
|
||||
@@ -40,21 +40,20 @@
|
||||
</view>
|
||||
|
||||
<!-- 中奖结果弹窗 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<!-- <ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" /> -->
|
||||
<!-- #endif -->
|
||||
<ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import LotteryGrid from "./components/LotteryGrid.vue";
|
||||
// import ResultModal from './components/ResultModal.vue'
|
||||
import LotteryGrid from "./components/LotteryGrid.vue";
|
||||
import ResultModal from './components/ResultModal.vue'
|
||||
import { getActivityList, getCommonRaffle } from "@/api/raffle.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// LotteryGrid,
|
||||
// ResultModal
|
||||
LotteryGrid,
|
||||
ResultModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -72,14 +71,14 @@ export default {
|
||||
backPath: null,
|
||||
};
|
||||
},
|
||||
// onLoad(option) {
|
||||
// const backPath = option.backPath;
|
||||
// console.log("option backPath", backPath);
|
||||
// if (backPath && backPath !== "null") {
|
||||
// this.backPath = backPath;
|
||||
// }
|
||||
// this.getCommon();
|
||||
// },
|
||||
onLoad(option) {
|
||||
const backPath = option.backPath;
|
||||
console.log("option backPath", backPath);
|
||||
if (backPath && backPath !== "null") {
|
||||
this.backPath = backPath;
|
||||
}
|
||||
this.getCommon();
|
||||
},
|
||||
mounted() {
|
||||
this.getActivityList();
|
||||
},
|
||||
@@ -160,7 +159,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.notice-view {
|
||||
width: 100%;
|
||||
min-height: 64rpx;
|
||||
|
||||
@@ -136,7 +136,7 @@
|
||||
<!-- 商品详情 -->
|
||||
<view class="content_details">
|
||||
<view class="content_details_title">商品详情</view>
|
||||
<view v-html="orderInfo.detailInfo"></view>
|
||||
<view v-html="detailRich" class="content_details_content"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -432,6 +432,7 @@ export default {
|
||||
activedType: "", // 活动类型
|
||||
activityId: "", // 秒杀活动ID
|
||||
skuBySpecInfo: {},
|
||||
detailRich: "",
|
||||
};
|
||||
},
|
||||
onBackPress(options) {
|
||||
@@ -902,6 +903,11 @@ export default {
|
||||
|
||||
console.log("查询详细内容---", data)
|
||||
this.orderInfo = data;
|
||||
this.detailRich = this.orderInfo.detailInfo.replace(
|
||||
/<img([^>]*?)>/gi,
|
||||
'<img$1 style="max-width:100%;height:auto;display:block;">'
|
||||
);
|
||||
|
||||
}
|
||||
},
|
||||
/**
|
||||
@@ -1305,6 +1311,10 @@ export default {
|
||||
.product_info_header_swiper {
|
||||
height: 800rpx !important;
|
||||
|
||||
.u-swiper {
|
||||
height: 800rpx !important;
|
||||
}
|
||||
|
||||
::v-deep(.u-swiper__wrapper) {
|
||||
height: 800rpx !important;
|
||||
|
||||
@@ -1510,10 +1520,17 @@ export default {
|
||||
margin-top: 30rpx;
|
||||
// margin-bottom: 200rpx;
|
||||
|
||||
|
||||
.content_details_title {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.content_details_content {
|
||||
rich-text {
|
||||
width: 700rpx;
|
||||
}
|
||||
}
|
||||
|
||||
img,
|
||||
img[alt] {
|
||||
max-width: 100%;
|
||||
|
||||
@@ -148,6 +148,11 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
/* 兼容 iOS 11~12.1 */
|
||||
padding-top:calc(80rpx + constant(safe-area-inset-top));
|
||||
/* 主流写法,iOS 11+、Android 9+ 均支持 */
|
||||
padding-top:calc(env(safe-area-inset-top) + 80rpx) ;
|
||||
background-color: #fff;
|
||||
.top-view{
|
||||
width:100%;
|
||||
min-height:150rpx;
|
||||
|
||||
@@ -440,7 +440,8 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.shopping_cart_warp {
|
||||
background-color: $app-bj;
|
||||
padding: 104rpx 30rpx 30rpx;
|
||||
padding: constant(safe-area-inset-top) 30rpx 30rpx;
|
||||
padding: env(safe-area-inset-top) 30rpx 30rpx;
|
||||
overflow: hidden;
|
||||
|
||||
&.isDataNull-calss {
|
||||
@@ -455,7 +456,7 @@ export default {
|
||||
height: calc(100vh - 100rpx - 50rpx) !important;
|
||||
|
||||
.shopping_cart_content {
|
||||
height: calc(100vh - 104rpx - 30rpx - 30rpx - 100rpx - 10rpx) !important;
|
||||
// height: calc(100vh - 104rpx - 30rpx - 30rpx - 100rpx - 10rpx) !important;
|
||||
}
|
||||
|
||||
.shopping_cart_but {
|
||||
@@ -468,7 +469,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #222222;
|
||||
|
||||
margin-top: 160rpx;
|
||||
.cart {
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
@@ -543,7 +544,8 @@ export default {
|
||||
|
||||
.shopping_cart_but {
|
||||
position: fixed;
|
||||
bottom: calc(90rpx + env(safe-area-inset-bottom));
|
||||
bottom: 0;
|
||||
// bottom: calc(90rpx + env(safe-area-inset-bottom));
|
||||
left: 0;
|
||||
width: calc(100% - 40rpx);
|
||||
background: #ffffff;
|
||||
|
||||
+2
-1
@@ -88,6 +88,7 @@ export default {
|
||||
platformType: true,
|
||||
};
|
||||
},
|
||||
|
||||
onShow() {
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
@@ -236,7 +237,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
height: 100rpx;
|
||||
margin-top: 80rpx;
|
||||
|
||||
.sort_category_header {
|
||||
display: flex;
|
||||
|
||||
@@ -240,7 +240,9 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.content-two {
|
||||
height: calc(100vh);
|
||||
background-color: $app-bj;
|
||||
padding-top: 80rpx;
|
||||
background-color: #fff;
|
||||
// background-color: $app-bj;
|
||||
}
|
||||
|
||||
.head-view {
|
||||
|
||||
Reference in New Issue
Block a user