Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改商品详情页面

test
Enzo 4 years ago
parent
7d40a555c9
commit
a895aabc26
4 changed files with 177 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 172
      pages/goodsDetail/index.vue
  2. 2
      uview-ui/components/u-td/u-td.vue
  3. 4
      uview-ui/components/u-th/u-th.vue
  4. 4
      uview-ui/theme.scss

172
pages/goodsDetail/index.vue
View File

@ -27,32 +27,140 @@
<view class="label-item" v-for="(item, index) in goods_detail.coupon" :key="index">{{ item.tag }}</view>
</view>
</view>
<!-- 地址信息 -->
<!-- <view class="address-box">
<view class="lf-font-32 lf-font-bold">适用门店</view>
<view class="lf-m-t-20 lf-row-between">
<view class="lf-flex">
<image mode="aspectFill" class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image>
<image mode="aspectFill" class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image>
<view class="lf-font-32 lf-m-l-20 lf-line-1" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
<!-- 商品详情 -->
<view class="goods-detail" v-if="goods_detail.know">
<view class="lf-font-32 lf-font-bold lf-m-b-20">购买须知</view>
<rich-text :nodes="formatRichText(goods_detail.know)"></rich-text>
</view>
<view @click="makePhoneCall(goods_detail.store.tel)">
<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text>
<!-- 景区类型 -->
<view v-if="goods_detail.type == 2">
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">景区开放时间</view>
<view >
<u-table>
<u-tr>
<u-th>节点</u-th>
<u-th>夏季</u-th>
<u-th>冬季</u-th>
</u-tr>
<u-tr>
<u-td>周一至周五</u-td>
<u-td>08:00～21:00</u-td>
<u-td>09:00～20:00</u-td>
</u-tr>
<u-tr>
<u-td>周六至周日</u-td>
<u-td>07:30～23:00</u-td>
<u-td>08:30～21:00</u-td>
</u-tr>
</u-table>
</view>
</view>
<view class="lf-flex lf-m-t-20" @click="openMap">
<view style="width: 60rpx; height: 60rpx;" class="lf-row-center">
<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #555555;"></text>
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view>
<view class="lf-flex-column">
<view class="lf-row-between lf-m-b-20">
<view class="lf-color-gray lf-font-28">项目名称</view>
<view class="lf-color-gray lf-font-28">数量</view>
<view class="lf-color-gray lf-font-28">额外费用</view>
</view>
<view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }}</view>
<view class="lf-row-between">
<view class="lf-font-28 lf-color-black">过山车</view>
<view class="lf-font-28 lf-color-black">1张</view>
<view class="lf-font-28 lf-color-black">0元</view>
</view>
</view> -->
<!-- 商品详情 -->
<view class="goods-detail" v-if="goods_detail.know">
<view class="lf-font-32 lf-font-bold lf-m-b-20">购买须知</view>
<rich-text :nodes="formatRichText(goods_detail.know)"></rich-text>
<!-- <image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image> -->
</view>
</view>
</view>
<!-- 餐厅类型 -->
<view v-if="goods_detail.type == 3">
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">餐厅开放时间</view>
<view >
<u-table>
<u-tr>
<u-th>节点</u-th>
<u-th>上午</u-th>
<u-th>下午</u-th>
</u-tr>
<u-tr>
<u-td>周一至周五</u-td>
<u-td>08:00～21:00</u-td>
<u-td>09:00～20:00</u-td>
</u-tr>
<u-tr>
<u-td>周六至周日</u-td>
<u-td>07:30～23:00</u-td>
<u-td>08:30～21:00</u-td>
</u-tr>
</u-table>
</view>
</view>
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">包含套餐</view>
<view class="lf-flex-column">
<view class="lf-row-between lf-m-b-20">
<view class="lf-color-333 lf-font-28">米饭 x1</view>
<view class="lf-color-333 lf-font-28">¥3</view>
</view>
<view class="lf-row-between">
<view class="lf-color-333 lf-font-28">清蒸鲈鱼 x1</view>
<view class="lf-color-333 lf-font-28">50元</view>
</view>
</view>
</view>
</view>
<!-- 酒店类型 -->
<view class="goods-detail" style="padding-bottom: 0;" v-if="goods_detail.type == 1">
<view class="lf-font-32 lf-font-bold lf-m-b-20">酒店设施</view>
<view>
<view class="label-box1">
<view class="label-item" v-for="i of 7">智能电视</view>
</view>
</view>
</view>
<!-- 旅游路线类型 -->
<view v-if="goods_detail.type == 0">
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view>
<view class="lf-flex-column">
<view class="lf-row-between lf-m-b-20">
<view class="lf-color-gray lf-font-28">项目名称</view>
<view class="lf-color-gray lf-font-28">数量</view>
<view class="lf-color-gray lf-font-28">额外费用</view>
</view>
<view class="lf-row-between">
<view class="lf-font-28 lf-color-black">过山车</view>
<view class="lf-font-28 lf-color-black">1张</view>
<view class="lf-font-28 lf-color-black">0元</view>
</view>
</view>
</view>
<view class="goods-detail" >
<view class="lf-m-b-20 lf-row-between">
<view class="lf-font-32 lf-font-bold">
行程时间
</view>
<view class="lf-font-28 lf-color-black ">
2021年9月
</view>
</view>
<view class="lf-flex-column">
<view class="lf-row-between lf-m-b-20">
<view class="lf-color-333 lf-font-28">行程天数</view>
<view class="lf-color-333 lf-font-28">3天</view>
</view>
<view class="lf-row-between">
<view class="lf-color-333 lf-font-28">行程日期</view>
<view class="lf-color-333 lf-font-28">2021-09-18~2021-09-21</view>
</view>
</view>
</view>
</view>
<!-- 公共部分 -->
<view class="goods-detail" v-if="goods_detail.content">
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
<rich-text :nodes="formatRichText(goods_detail.content)"></rich-text>
@ -258,6 +366,7 @@
align-items: center;
color: #FFFFFF;
}
}
.label-box{
min-height: 130rpx;
width: 100%;
@ -280,6 +389,29 @@
margin-bottom: 20rpx;
}
}
.label-box1{
min-height: 130rpx;
width: 100%;
border-top: 1rpx solid #E5E5E5;
display: flex;
flex-wrap: wrap;
padding: 30rpx 0 10rpx 0;
.label-item{
width: max-content;
padding: 0 10rpx;
height: 54rpx;
border-radius: 10rpx;
border: 2rpx solid #1998FE;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: #1998FE;
background: rgba(25, 152, 254, 0.05);
margin-right: 20rpx;
margin-bottom: 20rpx;
}
}
.address-box{

2
uview-ui/components/u-td/u-td.vue
View File

@ -58,7 +58,7 @@
flex: 1;
justify-content: center;
font-size: 28rpx;
color: $u-content-color;
color: $u-content-color!important;
align-self: stretch;
box-sizing: border-box;
height: 100%;

4
uview-ui/components/u-th/u-th.vue
View File

@ -56,7 +56,7 @@
justify-content: center;
font-size: 28rpx;
color: $u-main-color;
font-weight: bold;
background-color: rgb(245, 246, 248);
// font-weight: bold;
background-color: white;
}
</style>

4
uview-ui/theme.scss
View File

@ -2,8 +2,8 @@
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
$u-main-color: #303133;
$u-content-color: #606266;
$u-main-color: #555;
$u-content-color: #222;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;

Write Preview
Loading…
Cancel
Save