w-front-end / select_good · Commits

Commit 8c34532844d33e8baa7644effed0aabcedbb9550

Authored by zhiyangdu
1 parent f46232c2

新增商品详情页

Inline Side-by-side
Showing 5 changed files with 489 additions and 25 deletions
src/components/swiper/swiper.less
  View file @8c34532
@@ -31,6 +31,20 @@ @@ -31,6 +31,20 @@
31 } 31 }
32 } 32 }
33 } 33 }
  34 + .custom-indicator {
  35 + width: 74px;
  36 + height: 38px;
  37 + line-height:38px;
  38 + background: #848484;
  39 + border-radius: 20px;
  40 + // opacity: 0.45;
  41 + position: absolute;
  42 + right: 30px;
  43 + bottom: 30px;
  44 + font-size: 22px;
  45 + color: #fff;
  46 + text-align: center;
  47 + }
34 /deep/ .van-swipe__indicators { 48 /deep/ .van-swipe__indicators {
35 left: unset; 49 left: unset;
36 right: 26px; 50 right: 26px;
@@ -51,3 +65,25 @@ @@ -51,3 +65,25 @@
51 } 65 }
52 } 66 }
53 } 67 }
  68 +// 积分商城样式
  69 +.points-mall-swiper{
  70 + position: relative;
  71 + width: 750px;
  72 + height: 750px;
  73 + overflow: hidden;
  74 + background: #F9F9F9;
  75 + .swipe{
  76 + // width: 750px;
  77 + .swipe-item {
  78 + // width: 750px;
  79 + .item{
  80 + /deep/ .img-box {
  81 + .img {
  82 + width: 565px;
  83 + height: 446px;
  84 + }
  85 + }
  86 + }
  87 + }
  88 + }
  89 +}
src/components/swiper/swiper.vue
  View file @8c34532
1 <template> 1 <template>
2 - <div class="swiper-box" v-if="swipers && swipers.length"> 2 + <div class="swiper-box" :class="{'points-mall-swiper':isPointsMall}" v-if="swipers && swipers.length">
3 <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange"> 3 <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange">
4 <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index"> 4 <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
5 <div class="item" @click="$parent.$parent.gotoDetail(item)"> 5 <div class="item" @click="$parent.$parent.gotoDetail(item)">
@@ -8,40 +8,47 @@ @@ -8,40 +8,47 @@
8 </div> 8 </div>
9 </div> 9 </div>
10 </swipe-item> 10 </swipe-item>
  11 + <template v-if="isPointsMall" #indicator>
  12 + <div class="custom-indicator">
  13 + {{ current + 1 }}/4
  14 + </div>
  15 + </template>
11 </swipe> 16 </swipe>
12 </div> 17 </div>
13 </template> 18 </template>
14 19
15 <script> 20 <script>
16 21
17 - // 引入组件  
18 - // import { Swipe, SwipeItem } from 'mint-ui';  
19 - import { Swipe, SwipeItem } from "vant"; 22 +// 引入组件
  23 +// import { Swipe, SwipeItem } from 'mint-ui';
  24 +import { Swipe, SwipeItem } from "vant";
20 25
21 - export default {  
22 - data() {  
23 - return {  
24 - showIndicators: true,  
25 - }  
26 - },  
27 - props: ["swipers", "options"],  
28 - components: {  
29 - Swipe,  
30 - SwipeItem  
31 - },  
32 - methods: {  
33 - /**  
34 - * 当swiper切换  
35 - * @param {int} index [切换swiper索引]  
36 - */  
37 - onChange(index) {  
38 - this.$emit("onChange", index);  
39 - }  
40 - } 26 +export default {
  27 + data () {
  28 + return {
  29 + showIndicators: true,
  30 + current: 0 // 图片位置
  31 + }
  32 + },
  33 + props: ["swipers", "options", "isPointsMall"],
  34 + components: {
  35 + Swipe,
  36 + SwipeItem
  37 + },
  38 + methods: {
  39 + /**
  40 + * 当swiper切换
  41 + * @param {int} index [切换swiper索引]
  42 + */
  43 + onChange (index) {
  44 + this.current = index;
  45 + this.$emit("onChange", index);
41 } 46 }
  47 + }
  48 +}
42 </script> 49 </script>
43 50
44 <!-- Add "scoped" attribute to limit CSS to this component only --> 51 <!-- Add "scoped" attribute to limit CSS to this component only -->
45 <style rel="stylesheet/less" lang="less" scoped> 52 <style rel="stylesheet/less" lang="less" scoped>
46 - @import './swiper'; 53 +@import './swiper';
47 </style> 54 </style>
src/pages/goodDetails/goodDetails.less 0 → 100644
  View file @8c34532
  1 +.good-details-box{
  2 + padding-bottom: 130px;
  3 + .main-box{
  4 + .title{
  5 + font-size: 34px;
  6 + font-weight: 500;
  7 + color: #333333;
  8 + line-height: 48px;
  9 + text-align: center;
  10 + margin-top: 30px;
  11 + }
  12 + .title-t{
  13 + margin:20px 60px 10px 60px ;
  14 + display: flex;
  15 + align-items: center;
  16 + justify-content: center;
  17 + .price{
  18 + height: 40px;
  19 + font-size: 28px;
  20 + font-weight: 400;
  21 + color: #999999;
  22 + line-height: 40px;
  23 + margin-right: 24px;
  24 + }
  25 + .integral{
  26 + height: 92px;
  27 + font-size: 66px;
  28 + font-weight: 500;
  29 + color: #FC1541;
  30 + line-height: 92px;
  31 + }
  32 + .integral-in{
  33 + height: 45px;
  34 + font-size: 32px;
  35 + font-weight: 400;
  36 + color: #333333;
  37 + line-height: 45px;
  38 + margin-left: 14px;
  39 + }
  40 + }
  41 + /*商品信息**/
  42 + .goods-info{
  43 + margin: 30px;
  44 + width: 690px;
  45 + height: 1653px;
  46 + background: #FFFFFF;
  47 + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.06);
  48 + border-radius: 24px;
  49 + overflow: hidden;
  50 + .good-title{
  51 + margin-top: 50px;
  52 + height: 42px;
  53 + font-size: 30px;
  54 + font-weight: 500;
  55 + color: #666666;
  56 + line-height: 42px;
  57 + text-align: center;
  58 + display: flex;
  59 + align-items: center;
  60 + justify-content: center;
  61 + .left{
  62 + margin-right: 28px;
  63 + }
  64 + .right{
  65 + margin-left: 28px;
  66 + }
  67 + }
  68 + .good-desc{
  69 + margin:40px 40px 10px 40px;
  70 + font-size: 26px;
  71 + font-weight: 300;
  72 + color: #999999;
  73 + line-height: 37px;
  74 + .text-left{
  75 + text-align: left;
  76 + margin-top: 20px;
  77 + span{
  78 + font-size: 26px;
  79 + font-weight: 400;
  80 + color: #666666;
  81 + line-height: 37px;
  82 + }
  83 + }
  84 + }
  85 + /**相似商品*/
  86 + .column-list-box{
  87 + margin-top:40px;
  88 + }
  89 + }
  90 + }
  91 + /**页脚*/
  92 + .footer{
  93 + width: 750px;
  94 + height: 130px;
  95 + background: #FFFFFF;
  96 + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  97 + position: fixed;
  98 + bottom:0px;
  99 + left:0px;
  100 + display:flex;
  101 + justify-content: center;
  102 + align-items: center;
  103 + .btn{
  104 + width: 690px;
  105 + height: 90px;
  106 + line-height: 90px;
  107 + background: #F5A623;
  108 + border-radius: 16px;
  109 + text-align: center;
  110 + color: #fff;
  111 + font-size: 34px;
  112 + font-weight: 500;
  113 + color: #FFFFFF;
  114 + }
  115 + }
  116 +}
0 \ No newline at end of file 117 \ No newline at end of file
src/pages/goodDetails/goodDetails.vue 0 → 100644
  View file @8c34532
  1 +<template>
  2 +<div class="good-details-box">
  3 + <!-- H5唤起App组件 -->
  4 + <call-app-box
  5 + class="call-app-box"
  6 + :style="'padding-top: ' + $parent.top.value + 'px'"
  7 + ref="callApp"
  8 + v-if="!isCNLive.value"
  9 + :callApps="$parent.callApps"
  10 + >
  11 + </call-app-box>
  12 + <back-box
  13 + v-if="$parent.isBack && isCNLive.value"
  14 + class="back-box"
  15 + :style="'padding-top: ' + $parent.top.value + 'px'"
  16 + @back="back"
  17 + :backs="backs"
  18 + >
  19 + </back-box>
  20 + <!--轮播-->
  21 + <swiper
  22 + :style="
  23 + 'margin-top:' +
  24 + ($parent.isBack && isCNLive.value ? 62 : 10) +
  25 + 'px'
  26 + "
  27 + v-if="banner"
  28 + :swipers="banner"
  29 + :isPointsMall= 'true'
  30 + :options="{
  31 + showIndicators: true
  32 + }"
  33 + >
  34 + </swiper>
  35 + <!-- 内容 -->
  36 + <div class="main-box">
  37 + <!-- 标题 -->
  38 + <div class="title">
  39 + 山东沂蒙 优质大蒜山东沂蒙 优质大蒜
  40 + </div>
  41 + <!-- 积分 -->
  42 + <div class="title-t">
  43 + <span class="price">¥200</span>
  44 + <span class="integral">15000</span>
  45 + <span class="integral-in">积分</span>
  46 + </div>
  47 + <!-- 商品信息 -->
  48 + <div class="goods-info">
  49 + <div class="good-title">
  50 + <span class="left">————</span>商品详情<span class="right">————</span>
  51 + </div>
  52 + <div class="good-desc">
  53 + 商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置
  54 + </div>
  55 + <div class="good-title">
  56 + <span class="left">————</span>兑换规则<span class="right">————</span>
  57 + </div>
  58 + <div class="good-desc">
  59 + <div class="text-left">商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置</div>
  60 + <div class="text-left">
  61 + <span>· 正版授权</span>
  62 + 所售商品均已官方授权，请放心购买；
  63 + </div>
  64 + <div class="text-left">
  65 + <span>· 正品保障</span>
  66 + 独家正品保障。
  67 + </div>
  68 + </div>
  69 + <div class="good-title">
  70 + <span class="left">————</span>相似商品<span class="right">————</span>
  71 + </div>
  72 + <!-- 像是商品推荐 -->
  73 + <!-- 商品样式 7 列表 -->
  74 + <column-list-box class="column-list-box" v-if="similarGoods && similarGoods.list && similarGoods.list.length" @jump="toDetail"
  75 + :lists="similarGoods"
  76 + com="7">
  77 + </column-list-box>
  78 + </div>
  79 + </div>
  80 + <!-- 页脚 -->
  81 + <div class="footer">
  82 + <div class="btn">
  83 + 立即兑换
  84 + </div>
  85 + </div>
  86 +</div>
  87 +</template>
  88 +
  89 +<script>
  90 +import { Swipe, SwipeItem } from 'vant';
  91 +import callAppBox from "@/components/callAppBox/callAppBox";
  92 +import swiper from "@/components/swiper/swiper";
  93 +import backBox from "@/components/backBox/backBox";
  94 +import columnListBox from "@/components/columnListBox/columnListBox";
  95 +export default {
  96 + data () {
  97 + return {
  98 + banner: [
  99 + { id: "290",
  100 + shop_type: "",
  101 + simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15d4780610.jpg",
  102 + title: "世行",
  103 + to: "0",
  104 + type: "0", }, { id: "290",
  105 + shop_type: "",
  106 + simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15d4780610.jpg",
  107 + title: "世行",
  108 + to: "0",
  109 + type: "0", }],
  110 + backs: null, // 后退按钮组
  111 + similarGoods: null // 相似商品
  112 + }
  113 + },
  114 + //部件
  115 + components: {
  116 + callAppBox,
  117 + swiper,
  118 + backBox,
  119 + columnListBox
  120 + },
  121 + //静态
  122 + props: [
  123 + ],
  124 + //对象内部的属性监听，也叫深度监听
  125 + watch: {
  126 + },
  127 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  128 + computed: {
  129 + },
  130 + //方法表示一个具体的操作，主要书写业务逻辑；
  131 + methods: {
  132 + /**
  133 + * 积分商品详情页页面接口
  134 + */
  135 + fansShopMessageList () {
  136 +
  137 + // 校验登录
  138 + if (this.$parent.checkLogin()) {
  139 +
  140 + // 加载中提示
  141 + Indicator.open("加载中...");
  142 +
  143 + // 获取证书请求接口
  144 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
  145 + uid: this.getStore("uid")
  146 + }, this.fansShopMessageListCallback, {
  147 + method: "POST"
  148 + });
  149 + }
  150 + },
  151 +
  152 + /**
  153 + * 积分商品详情页页面接口回调
  154 + * @param {Object} res [服务器返回数据]
  155 + * @param {Object} ext [扩展参数]
  156 + */
  157 + fansShopMessageListCallback (res, ext) {
  158 +
  159 + // 加载完成
  160 + Indicator.close();
  161 +
  162 + // 返回处理
  163 + if (res.code == 200) {
  164 +
  165 + // 解构数据
  166 + let { data: datas } = res;
  167 +
  168 + /* 获取banner */
  169 +
  170 +
  171 +
  172 + /* 获取详细信息 */
  173 +
  174 + /* 相似商品 */
  175 +
  176 + } else if (res.code == 400) {
  177 +
  178 + // 获取积分商品详情页失败
  179 + Toast(res.message);
  180 + } else {
  181 +
  182 + // 获取积分商品详情页失败
  183 + Toast("获取积分商品详情页失败");
  184 + }
  185 + },
  186 + },
  187 + //请求数据
  188 + created () {
  189 + // 设置标题
  190 + this.$set(this, "title", "积分商品详情页");
  191 +
  192 + // 判断是否在App内
  193 + if (this.isCNLive.value) {
  194 +
  195 + // 添加后退按钮组“后退”和“分享”按钮
  196 + this.$set(this, 'backs', {
  197 + funcs: {
  198 + back: {
  199 + icon: "static/img/icon_back.png"
  200 + },
  201 + funcArray: [
  202 + {
  203 + icon: "static/img/icon_share.png",
  204 + func: this.toShare
  205 + }
  206 + ]
  207 + }
  208 + });
  209 +
  210 + // 设置标题
  211 + this.$set(this.backs, 'title', '积分商品详情页');
  212 + // 临时，实物商品列表
  213 + this.$set(this, 'similarGoods', {
  214 + list: [
  215 + {
  216 + activity: "0",
  217 + activity_desc: "",
  218 + addtime: "1604544867",
  219 + ads: "23123",
  220 + code: "160454486791776561000",
  221 + id: "9525539",
  222 + price: "0.01",
  223 + prices: "0.00",
  224 + shop_type: "1",
  225 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  226 + stock: "0",
  227 + stoptime: "0",
  228 + title: "aabbsdf350ml",
  229 + grade: 1500, // 积分
  230 + time_state: 2,
  231 + stock: 0
  232 + },
  233 + {
  234 + activity: "0",
  235 + activity_desc: "",
  236 + addtime: "1604544867",
  237 + ads: "23123",
  238 + code: "160454486791776561000",
  239 + id: "9525539",
  240 + price: "0.01",
  241 + prices: "0.00",
  242 + shop_type: "1",
  243 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  244 + stock: "0",
  245 + stoptime: "0",
  246 + title: "aabbsdf350ml",
  247 + grade: 1500 // 积分
  248 + },
  249 + {
  250 + activity: "0",
  251 + activity_desc: "",
  252 + addtime: "1604544867",
  253 + ads: "23123",
  254 + code: "160454486791776561000",
  255 + id: "9525539",
  256 + price: "0.01",
  257 + prices: "0.00",
  258 + shop_type: "1",
  259 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  260 + stock: "0",
  261 + stoptime: "0",
  262 + title: "aabbsdf350ml",
  263 + grade: 1500 // 积分
  264 + },
  265 + {
  266 + activity: "0",
  267 + activity_desc: "",
  268 + addtime: "1604544867",
  269 + ads: "23123",
  270 + code: "160454486791776561000",
  271 + id: "9525539",
  272 + price: "0.01",
  273 + prices: "0.00",
  274 + shop_type: "1",
  275 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  276 + stock: "0",
  277 + stoptime: "0",
  278 + title: "aabbsdf350ml",
  279 + grade: 1500 // 积分
  280 + }
  281 + ]
  282 + });
  283 + }
  284 +
  285 + },
  286 + mounted () {
  287 + }
  288 +}
  289 +</script>
  290 +
  291 +<style rel="stylesheet/less" lang="less" scoped>
  292 +@import './goodDetails.less';
  293 +</style>
  294 +
src/router/index.js
  View file @8c34532
@@ -250,6 +250,17 @@ const router = new Router({ @@ -250,6 +250,17 @@ const router = new Router({
250 meta: { 250 meta: {
251 requireAuth: false 251 requireAuth: false
252 } 252 }
  253 + },
  254 + {
  255 + // 商品详情页
  256 + path: "/goodDetails",
  257 + name: "goodDetails",
  258 + component: resolve => {
  259 + require(["@/pages/goodDetails/goodDetails"], resolve);
  260 + },
  261 + meta: {
  262 + requireAuth: false
  263 + }
253 } 264 }
254 ] 265 ]
255 }, 266 },