|
@@ -5,17 +5,17 @@
|
|
|
<image :src="good.image" mode="" class="good-img"></image>
|
|
|
<view class="good-info flex">
|
|
|
<view class="tit clamp2">
|
|
|
- {{good.store_name }}
|
|
|
+ {{good.store_name }}
|
|
|
</view>
|
|
|
<view class="price-wrap">
|
|
|
<view class="old-price">
|
|
|
<text class="old">¥{{good.ot_price}}</text>
|
|
|
<image src="../../static/icon/down.png" mode=""></image>
|
|
|
- <text class="zj">直降{{good.price - good.ot_price}}元</text>
|
|
|
+ <text class="zj">直降{{good.ot_price - good.price}}元</text>
|
|
|
</view>
|
|
|
<view class="integral-wrap">
|
|
|
<image src="../../static/icon/jf.png" mode=""></image>
|
|
|
- <text class="price">{{good.ot_price}}</text>
|
|
|
+ <text class="price">{{good.price}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="btn" @click="nav(good.id)">
|
|
@@ -25,174 +25,190 @@
|
|
|
</view>
|
|
|
<view class="jg"></view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { groomList } from '@/api/product.js';
|
|
|
-export default {
|
|
|
- filters: {
|
|
|
- toFixed: function(value) {
|
|
|
- // 判断是否为整数
|
|
|
- if (value % 1 == 0) {
|
|
|
- return value;
|
|
|
- } else {
|
|
|
- return value.toFixed(2);
|
|
|
+ import {
|
|
|
+ groomList
|
|
|
+ } from '@/api/product.js';
|
|
|
+ export default {
|
|
|
+ filters: {
|
|
|
+ toFixed: function(value) {
|
|
|
+ // 判断是否为整数
|
|
|
+ if (value % 1 == 0) {
|
|
|
+ return value;
|
|
|
+ } else {
|
|
|
+ return value.toFixed(2);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [],
|
|
|
- bannerImg: []
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- // 加载基础数据
|
|
|
- this.loadData();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //详情页
|
|
|
- navToDetailPage(item) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/product?id=' + item.id
|
|
|
- });
|
|
|
},
|
|
|
- // 轮播图跳转
|
|
|
- bannerNavToUrl(item) {
|
|
|
- // #ifdef H5
|
|
|
- if (item.wap_link.indexOf('http') > 0) {
|
|
|
- window.location.href = item.wap_link;
|
|
|
- }
|
|
|
- // #endif
|
|
|
- //测试数据没有写id,用title代替
|
|
|
- uni.navigateTo({
|
|
|
- url: item.wap_link
|
|
|
- });
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ bannerImg: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ // 加载基础数据
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
- // 请求载入数据
|
|
|
- async loadData() {
|
|
|
- groomList({}, 6)
|
|
|
- .then(({ data }) => {
|
|
|
- // 保存轮播图
|
|
|
- this.bannerImg = data.banner;
|
|
|
- // 保存商品信息
|
|
|
- this.list = data.list.map(e => {
|
|
|
- e.price = Number(e.price);
|
|
|
- e.ot_price = Number(e.ot_price);
|
|
|
- return e;
|
|
|
+ methods: {
|
|
|
+ //详情页
|
|
|
+ navToDetailPage(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/product/product?id=' + item.id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 轮播图跳转
|
|
|
+ bannerNavToUrl(item) {
|
|
|
+ // #ifdef H5
|
|
|
+ if (item.wap_link.indexOf('http') > 0) {
|
|
|
+ window.location.href = item.wap_link;
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ //测试数据没有写id,用title代替
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.wap_link
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 请求载入数据
|
|
|
+ async loadData() {
|
|
|
+ groomList({}, 6)
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ // 保存轮播图
|
|
|
+ this.bannerImg = data.banner;
|
|
|
+ // 保存商品信息
|
|
|
+ this.list = data.list.map(e => {
|
|
|
+ e.price = Number(e.price);
|
|
|
+ e.ot_price = Number(e.ot_price);
|
|
|
+ return e;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
});
|
|
|
+ },
|
|
|
+ nav(id) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/product/product?id=' + id
|
|
|
})
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- nav(id) {
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/product/product?id=' + id
|
|
|
- })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-page {
|
|
|
- background: $page-color-base;
|
|
|
-}
|
|
|
-.jg {
|
|
|
- height: 20rpx;
|
|
|
-}
|
|
|
-.good-wrapper {
|
|
|
- width: 690rpx;
|
|
|
- height: 276rpx;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- margin: 0 auto 20rpx;
|
|
|
- // &:last-of-type {
|
|
|
- // margin-bottom: 0;
|
|
|
- // }
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
|
|
|
- border-radius: 10rpx;
|
|
|
- padding: 20rpx 25rpx 20rpx 15rpx;
|
|
|
- .good-img {
|
|
|
- flex-shrink: 0;
|
|
|
- background-color: #eee;
|
|
|
- width: 236rpx;
|
|
|
- height: 236rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
+ page {
|
|
|
+ background: $page-color-base;
|
|
|
}
|
|
|
- .good-info {
|
|
|
- flex-direction: column;
|
|
|
+
|
|
|
+ .jg {
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-wrapper {
|
|
|
+ width: 690rpx;
|
|
|
+ height: 276rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- .tit {
|
|
|
- padding-top: 10rpx;
|
|
|
- padding-right: 15rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- width: 137rpx;
|
|
|
- line-height: 52rpx;
|
|
|
- background: linear-gradient(0deg, #52C696 0%, #52C696 100%);
|
|
|
- border-radius: 26rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
+ margin: 0 auto 20rpx;
|
|
|
+ // &:last-of-type {
|
|
|
+ // margin-bottom: 0;
|
|
|
+ // }
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx 25rpx 20rpx 15rpx;
|
|
|
+
|
|
|
+ .good-img {
|
|
|
+ flex-shrink: 0;
|
|
|
+ background-color: #eee;
|
|
|
+ width: 236rpx;
|
|
|
+ height: 236rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
- .price-wrap {
|
|
|
- .old-price {
|
|
|
-
|
|
|
- .old {
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- image {
|
|
|
- display: inline-block;
|
|
|
- width: 14rpx;
|
|
|
- height: 20rpx;
|
|
|
- margin: 0 6rpx 0 10rpx;
|
|
|
- }
|
|
|
- .zj {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #B59467;
|
|
|
- }
|
|
|
+
|
|
|
+ .good-info {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ padding-top: 10rpx;
|
|
|
+ padding-right: 15rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 137rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ background: linear-gradient(0deg, #52C696 0%, #52C696 100%);
|
|
|
+ border-radius: 26rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
- .integral-wrap {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- padding-top: 14rpx;
|
|
|
- image {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
+
|
|
|
+ .price-wrap {
|
|
|
+ .old-price {
|
|
|
+
|
|
|
+ .old {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ display: inline-block;
|
|
|
+ width: 14rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin: 0 6rpx 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zj {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #B59467;
|
|
|
+ }
|
|
|
}
|
|
|
- .price {
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #FF6F0F;
|
|
|
- line-height: 40rpx;
|
|
|
+
|
|
|
+ .integral-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding-top: 14rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6F0F;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|