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