From cbafddfb9c104e9059b21c84b1b2fabbdbd5721d Mon Sep 17 00:00:00 2001
From: Admin <376654749@qq.com>
Date: Thu, 6 Jan 2022 03:26:40 +0000
Subject: [PATCH] missing file

---
 rc-busness/pages/productdetails/producted.vue | 1154 ++++++++++++++++
 .../pages/productdetails/productlist.vue      | 1202 +++++++++++++++++
 .../pages/productdetails/userdetails.vue      |  195 +++
 3 files changed, 2551 insertions(+)
 create mode 100644 rc-busness/pages/productdetails/producted.vue
 create mode 100644 rc-busness/pages/productdetails/productlist.vue
 create mode 100644 rc-busness/pages/productdetails/userdetails.vue

diff --git a/rc-busness/pages/productdetails/producted.vue b/rc-busness/pages/productdetails/producted.vue
new file mode 100644
index 00000000..a4c02168
--- /dev/null
+++ b/rc-busness/pages/productdetails/producted.vue
@@ -0,0 +1,1154 @@
+<template>
+<div>
+  <div class="user" v-for="(item,index) in newlist" :key="index">
+    <Myheader></Myheader>
+    <div class="rc-usermain" >
+    <magnifier v-bind:parentmsg="msg" ></magnifier>
+    <div class="rc-header" >
+      <div class="rc-main" >
+        <div class="usermain">
+        <div class="rc-title">
+          <h2>{{ item.productName }}</h2>
+        </div>
+
+        <div class="productdetails">
+          <div class="rc-productdetail">
+            <i>商品价格:</i>
+            <span>￥{{ item.rsp }}</span>
+          </div>
+          <div class="rc-productdetai">
+            <div>
+            <i>活动促销:</i>
+            <span>{{ item.basePrice }}</span>
+            </div>
+            <em @click="userget()">立即领取</em>
+          </div>
+           <div class="rc-button"  v-if="!userbuy">
+              <span @click="usertanchu(item,0)">加入购物车</span>
+              <span @click="usertanchu(item,1)">立即购买</span>
+            </div>
+        </div>
+
+        <div class="rc-productdeta" v-if="userbuy">
+          <div class="rc-prodtop">
+            <span>商品规格</span>
+            <!-- <em v-for="(item, index) in stype" :key="index"  @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
+              {{ item.title }}
+            </em> -->
+
+             <em class='active'>
+              {{ item.specifications }}
+            </em>
+          </div>
+          <div class="rc-produnnum">
+            <span>商品数量:</span>
+            <img src="../../assets/image/userjian.png" alt="" @click="sub()" />
+            <strong>{{sales_num}}</strong>
+                <img
+            src="../../assets/image/userjia.png" alt="" @click="plus()"
+              class="rc-message"
+              
+              
+            />
+          </div>
+
+          <div class="certification">
+            <!-- <ul>
+            <li>
+                      <span
+                >服务说明：<i>{{ item.period }}</i></span
+              >
+              </li>
+              <li>
+                <span
+                  >商品运费：<i>{{ item.starttime }}</i></span
+                >
+              </li>
+        
+              <li>
+                      <span
+                >商品编号：<i>{{ item.shangbianhao }}</i></span
+              >
+              </li>
+            </ul> -->
+            <div class="rc-button">
+              <span @click="usertanchu(item,0)">加入购物车</span>
+              <span @click="usertanchu(item,1)">立即购买</span>
+            </div>
+          </div>
+        </div>
+</div>
+      
+      </div>
+
+    
+    </div>
+    </div>
+        <div class="rc-footimage">
+          <img :src=item.showImgFile alt="">
+
+        </div>
+  </div>
+      <el-dialog
+    :visible.sync="dialogInfo1"
+    hegight="700px"
+     @close='userclose'
+  >
+       <div class="rs-dis">
+          <div
+            class="rc-discount"
+            v-for="(item, index) in usernewlist"
+            :key="index"
+          >
+            <img :src="userimage" alt="" />
+            <div class="rc-contair">
+              <div class="rc-left">
+                <div>
+                  <i>￥</i><span>{{ item.couponAmount }}</span>
+                </div>
+              </div>
+              <div class="rc-right">
+                <i>
+                  {{ item.couponDesc }}
+                </i>
+                <div class="rc-main" id="rc-main">
+                  <span>有效期</span>
+                  <em>{{ item.validTo }}</em>
+                </div>
+                <div class="rc-footer">
+                  <span @click="usergetconf(item)">立即领取</span>
+                </div>
+              </div>
+
+       
+            </div>
+          </div>
+
+       </div>
+
+  </el-dialog>
+      <el-dialog
+    :visible.sync="dialogInfo2"
+    @close='userclose'
+  >
+    <div class="rc-headera">
+      <div class="rc-title">
+     <img src="../../assets/error.png" alt="">
+     </div> 
+       <div class="rc-logmain">
+            <h3>温馨提示</h3>
+            <span>请先点击下方进行登录/注册</span>
+
+       </div>
+         <nuxt-link :to="`/userlogin/login/`">
+       <div class="userer">
+           <span>立即登录</span>
+       
+       </div>
+           </nuxt-link>
+    </div>
+
+
+  </el-dialog>
+  </div>
+</template>
+
+<script>
+import Myheader from "~/components/header.vue";
+import Magnifier from "@/components/magnifier.vue";
+  import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
+  const settings = require("@/config");
+export default {
+  data() {
+    return {
+       tableLabelTest:[],    
+      userimage: require("../../assets/image/unused.png"),
+      activeIndexa:0,
+      dialogInfo1:false,
+      name: [],
+      userlist:[],
+      drawlist:[],//用户可以领取的优惠券
+      alldraw:[],
+      userlistmenu:[],
+      msg:['11111111'],
+      parent_msg:['111'],
+      usermessage:[],
+         dialogInfo2:false,
+         productCode:'',//商品code
+         productlist:[],
+         userbuy:true,
+              sales_num:1,
+        usernewlist: [
+        {
+          price: "30",
+          pricestype: "新客优惠券",
+          special: "全场每满299-30",
+          period: "有效期",
+          starttime: "2021.11.29-2022.01.28",
+          catimage: require("../../assets/image/unused.png"),
+        },
+        {
+          price: "30",
+          pricestype: "新客优惠券",
+          special: "全场每满299-30",
+          period: "有效期",
+          starttime: "2021.11.29-2022.01.28",
+          catimage: require("../../assets/image/unused.png"),
+        },
+      ],
+
+
+      newlist: [
+        {
+          price: "167.00",
+          pricestype: "英国短毛猫成猫全价湿粮",
+          special: "限时折扣全场商品8折",
+          period: "今晚20:00前付款，明日12:00前发货",
+          starttime: "商品未满199元  快递费:9.00元",
+          shangbianhao: "6212263798102432",
+          catimage: require("../../assets/image/rc-new.png"),
+        },
+      ],
+      stype: [
+        {
+          title: "3kg",
+        },
+        {
+          title: "5kg",
+        },
+      ],
+    };
+
+  },
+   components: {
+    Myheader,
+    Magnifier,
+  },
+    mounted() {
+     
+    if(this.usermessage!=='' ||this.usermessage.data!==undefined){
+this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
+         let stype=this.$route.query.stype;
+         this.productCode=this.$route.query.productCode;
+   console.log(this.productCode)
+         this.userquery(this.productCode);
+             console.log(this.userlistmenu)
+         this.$nextTick(()=>{
+              
+         })
+         if(stype==1){
+            this.userbuy=true;
+         }else if(stype==2){
+           console.log('这是要消失的')
+              this.$nextTick(() => {
+              this.userbuy=false;
+      
+        })
+   
+
+         }
+    }
+
+
+  },
+  methods: {
+    //领取优惠券
+usergetconf(item){
+  console.log(item);
+if(this.usermessage.data!==''||this.usermessage.data!==undefined){
+  this.getconf(this.usermessage.data.id,item.couponId);
+}
+},
+
+        //获取用户领取的优惠券
+          async getconf(memberId,couponId) {
+      let data = await getConfig(memberId,couponId);
+      if(data){
+
+           this.$message({
+                                type: 'warning',
+                                message: data.msg
+                            });
+        
+        console.log(data);
+      }
+            
+    },
+
+
+
+    //  changeName(newName){
+    //             this.name = newName;
+    //         },
+    
+ 
+       userclose(){
+       console.log('这是关闭的');
+       this.userlist=[];
+       },
+       async userquery() {
+      console.log("-----");
+
+      let data = await goodsmessage(this.productCode);
+      if(data){
+        this.newlist=data.data;
+             
+      }
+          
+           this.userlistmenu=this.newlist[0].productAttachmentList;
+           this.parent_msg=this.userlistmenu;
+           console.log( this.userlistmenu)
+      
+    },
+ 
+          //获取用户领取的优惠券
+          async userdraw(mobile) {
+      let data = await getdraw(mobile);
+      if(data){
+        this.drawlist=data.data;
+      }
+            
+    },
+
+             //获取所有的优惠券
+          async alldrawlist(memberId) {
+      let data = await alldiscount(memberId);
+      let userlist=[];
+      let menulsit=[];
+      if(data){
+        this.alldraw=data;
+        // console.log(this.alldraw.data);
+        let alllist=[];
+        this.userlist=this.alldraw.data;
+       this.userlist.forEach((element,index)=>{
+         if(typeof element.productCodes=='string'){
+           userlist.push(element);
+          //  let s=element.productCodes.split(',');
+          //     console.log(s.indexOf(this.productCode) != -1 )
+          //  console.log('这是字符串')
+
+         }
+   
+       })
+           let menualist=[];
+          userlist.filter(item=>{
+            console.log(item);
+            item.productCodes=item.productCodes.split(',')
+            item.productCodes.forEach(element=>{
+              if(element==this.productCode &&item.activityId!==10){
+                console.log(element)
+                 console.log(this.productCode)
+                 menualist.push(item);
+                
+                console.log('----');
+              }
+            })
+   
+          
+            })
+            this.usernewlist=menualist;
+         console.log(this.usernewlist);
+        
+      }
+            
+    },
+
+    plus(num,index){
+ 
+	this.sales_num= parseInt(this.sales_num) + 1;
+  console.log(	this.sales_num);
+} ,
+		// 数量减方法
+		sub(num,index){
+			if(	this.sales_num <= 1){
+				this.sales_num = 1;
+			}
+			else{
+					this.sales_num = parseInt(this.sales_num) - 1;
+			}
+
+		},
+
+          async courseId(item) {
+            console.log(item);
+            console.log(this.usermessage);
+            // let userid=JSON.parse(location.getItem('userInfo'));
+            // let mobile=JSON.parse(location.getItem('userInfo'));
+            // console.log(userid,mobile);
+      let data = await postCourseId(  this.productCode,this.sales_num,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.productName,item.basePrice,item.specifications);
+      if(data){
+        this.productlist=data;
+      }
+            console.log(data);
+    },
+usertanchu(item,orderm){
+
+ let user= localStorage.getItem("userInfo");
+ if(user==undefined||user==null||user==''){
+ this.dialogInfo2=true;
+ return
+ }else{
+    
+      this.courseId(item);
+      if(orderm==0){
+          this.$message({
+                                type: 'warning',
+                                message: '加入购物车成功'
+                            });
+    }
+  if(orderm==1){
+  this.$router.push({
+        path: "/myorder/userrecord",
+       
+      });
+  }
+     
+ }
+
+
+     
+
+},
+    userget(){
+       this.userdraw(this.usermessage.data.mobile);
+       this.alldrawlist(this.usermessage.data.id);
+        this.dialogInfo1=true;
+    },
+           selectsearch(item, index) {
+         
+             this.activeIndexa=index;
+    },
+  },
+
+  onceproduct(){
+
+  },
+ 
+};
+</script>
+
+<style lang="less" scoped>
+// 手机端
+@media screen and(min-width: 320px) and(max-width:768px) {
+  .rc-headera{
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    span{
+  width: 130px;
+height: 40px;
+border: 2px solid #E2001A;
+border-radius: 30px;
+display: block;
+color: #E2001A;
+line-height: 40px;
+margin-top: 42px;
+font-size: 14px;
+    }
+    i{
+        font-size: 18px;
+          font-style: normal;
+           display: block;
+           margin-top: 32px;
+color: #E1001A;
+    }
+  }
+}
+        /deep/.el-dialog {
+ width: 80%;
+ position: relative;
+}
+    .rc-discount {
+    position: relative;
+    width: 100%;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-contair {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #e1001a;
+      padding-right: 21px;
+      width: 30%;
+      float: left;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 12px;
+      }
+      span {
+        font-size: 26px;
+      }
+      strong {
+        font-style: normal;
+        font-size: 12px;
+        display: block;
+        margin-top: 8px;
+      }
+    }
+    .rc-right {
+      display: flex;
+      flex-direction: column;
+      margin-left: 36px;
+      justify-content: center;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 16px;
+        color: #e1001a;
+      }
+      .rc-main {
+        color: #999999;
+        font-size: 12px;
+      }
+      span {
+        display: block;
+        margin-top: 8px;
+      }
+      em {
+        font-style: normal;  
+      }
+    }
+    .rc-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 10px;
+      span {
+        width: 72px;
+        height: 25px;
+        background: #e2001a;
+        text-align: center;
+        line-height: 25px;
+        font-size: 12px;
+        color: #ffffff;
+        margin-bottom: 8px;
+        border-radius: 100px;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+    }
+   .active{
+     border: 2px solid #E2001A;
+    color:#666666;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    .unactive{
+      border: 2px solid #808285;
+      color:#666666;
+      cursor: pointer;
+           font-size: 16px;
+     }
+       .rc-footimage{
+        overflow: hidden;
+        width: 100%;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+      }
+  .rc-header {
+    width: 100%;
+  
+    .rc-main {
+  
+      width: 92%;
+      margin: 0 auto;
+      .rc-title {
+        height: 85px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #d8d8d8;
+        h2 {
+          font-size: 22px;
+
+          color: #e1001a;
+        }
+      }
+      .productdetails {
+               .rc-button{
+          width: 100%;
+          padding-top: 33px;
+          display: flex;
+          align-items: center;
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+        margin-top: 19px;
+        .rc-productdetail {
+          display: flex;
+          align-items: center;
+          i {
+            font-style: normal;
+            font-size: 14px;
+
+            color: #333333;
+          }
+
+          span {
+            font-size: 18px;
+            margin-left: 8px;
+            color: #e1001a;
+          }
+        }
+        .rc-productdetai {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 10px;
+          i {
+            font-style: normal;
+            font-size: 14px;
+            color: #333333;
+          }
+          span {
+            font-size: 14px;
+            color: #666666;
+            margin-left: 8px;
+          }
+          em {
+            font-size: 14px;
+            font-style: normal;
+            margin-left: 68px;
+            color: #e2001a;
+          }
+        }
+      }
+
+      .rc-productdeta {
+        margin-top: 56px;
+        .rc-prodtop {
+          display: flex;
+          align-items: center;
+          span {
+            font-size: 14px;
+            color: #333333;
+          }
+          em {
+            font-style: normal;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 59px;
+            font-size: 16px;
+            margin-left: 10px;
+            height: 39px;
+            border-radius: 3px;
+          }
+        }
+      }
+      .rc-produnnum {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+        margin-top: 16px;
+        border-bottom: 1px solid #d7d7d7;
+        span {
+          font-size: 14px;
+          color: #333333;
+        }
+        img {
+          width: 29px;
+          height: 29px;
+          display: block;
+        }
+        .rc-message {
+          width: 29px;
+          margin-left: 8px;
+          height: 29px;
+          display: block;
+        }
+
+        strong {
+          font-style: normal;
+          list-style: none;
+          width: 30px;
+          height: 30px;
+          border: 1px solid #d7d7d7;
+          opacity: 1;
+          border-radius: 3px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          margin: 0 5px 0 5px;
+          color: #666666;
+        }
+      }
+      .certification {
+               .rc-button{
+          width: 100%;
+          padding-top: 33px;
+          display: flex;
+          align-items: center;
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+        margin-top: 16px;
+        ul {
+          display: flex;
+          flex-direction: column;
+          line-height: 30px;
+          li {
+            float: left;
+            width: 100%;
+            text-align: left;
+            span {
+              font-size: 14px;
+              color: #333333;
+            }
+            i{
+              font-style: normal;
+              font-size: 14px;
+              color: #666666;
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+//    /* 最小768px最大1920 *pc端/
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+  .rc-headera{
+    
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    span{
+  width: 130px;
+height: 40px;
+border: 2px solid #E2001A;
+border-radius: 30px;
+display: block;
+color: #E2001A;
+line-height: 40px;
+margin-top: 42px;
+font-size: 14px;
+    }
+    i{
+        font-size: 18px;
+          font-style: normal;
+           display: block;
+           margin-top: 32px;
+color: #E1001A;
+    }
+  }
+}
+  .rc-header{
+ display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    h3{
+      color:#333333;
+      font-size: 26px;
+    }
+  .rc-title{
+     img{
+       width: 96px;
+       height: 96px;
+
+     }
+  }
+  .userer{
+    img{
+      width: 210px;
+      height: 210px;
+      display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    } 
+
+    span{
+        font-size: 16px;
+
+color: #333333;
+    }
+    i{
+        font-size: 18px;
+          font-style: normal;
+           display: block;
+           margin-top: 32px;
+color: #E1001A;
+    }
+  }
+}
+      /deep/.el-dialog {
+ width: 440px;
+ height: 432px;
+ position: relative;
+}
+
+  .rc-discount {
+    position: relative;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-contair {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .rc-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #e1001a;
+      padding-right: 21px;
+      width: 30%;
+      float: left;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 12px;
+      }
+      span {
+        font-size: 26px;
+      }
+      strong {
+        font-style: normal;
+        font-size: 12px;
+        display: block;
+        margin-top: 8px;
+      }
+    }
+    .rc-right {
+      display: flex;
+      flex-direction: column;
+      margin-left: 36px;
+      justify-content: center;
+      height: 100%;
+      i {
+        font-style: normal;
+        font-size: 16px;
+        color: #e1001a;
+      }
+      .rc-main {
+        color: #999999;
+        font-size: 12px;
+      }
+      span {
+        display: block;
+        margin-top: 8px;
+      }
+      em {
+        font-style: normal;  
+      }
+    }
+    .rc-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 10px;
+      span {
+        width: 72px;
+        height: 25px;
+        background: #e2001a;
+        text-align: center;
+        line-height: 25px;
+        font-size: 12px;
+        color: #ffffff;
+        margin-bottom: 8px;
+        border-radius: 100px;
+            margin-right: 8px;
+            cursor: pointer;
+      }
+    }
+    }
+  .rc-usermain{
+        display: flex;
+        align-items: center;
+  }
+  .active{
+     border: 2px solid #E2001A;
+    color:#666666;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    .unactive{
+      border: 2px solid #808285;
+      color:#666666;
+      cursor: pointer;
+           font-size: 16px;
+     }
+  .rc-header {
+    width: 100%;
+       margin-left: 80px;
+          .rc-footimage{
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    .rc-main {
+   
+      width: 92%;
+      margin: 0 auto;
+      .rc-title {
+        height: 85px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #d8d8d8;
+        h2 {
+          
+font-size: 30px;
+          color: #e1001a;
+        }
+      }
+      .productdetails {
+               .rc-button{
+          width: 100%;
+          padding-top: 33px;
+          display: flex;
+          align-items: center;
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+cursor: pointer;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+        margin-top: 19px;
+        .rc-productdetail {
+          display: flex;
+          align-items: center;
+          i {
+            font-style: normal;
+            font-size: 18px;
+
+            color: #333333;
+          }
+
+          span {
+            font-size: 18px;
+            margin-left: 8px;
+            color: #e1001a;
+          }
+        }
+        .rc-productdetai {
+         display: flex;
+    align-items: center;
+    margin-top: 10px;
+    border-bottom: 1px solid #d7d7d7;
+    padding-bottom: 17px;
+          i {
+            font-style: normal;
+          
+
+font-size: 18px;
+            color: #333333;
+          }
+          span {
+            
+font-size: 20px;
+            color: #666666;
+            margin-left: 8px;
+          }
+          em {
+            font-size: 16px;
+            font-style: normal;
+             width: 40%;
+             text-align: right;
+             display: block;            
+color: #E2001A;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .rc-productdeta {
+        margin-top: 16px;
+        .rc-prodtop {
+          display: flex;
+          align-items: center;
+          span {
+            
+font-size: 18px;
+            color: #333333;
+          }
+          em {
+            font-style: normal;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 59px;
+            font-size: 16px;
+            margin-left: 10px;
+            height: 39px;
+            border-radius: 3px;
+            color:#666666;
+          }
+        }
+      }
+      .rc-produnnum {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+        margin-top: 16px;
+        border-bottom: 1px solid #d7d7d7;
+        span {
+          font-size: 18px;
+          color: #333333;
+        }
+        img {
+          width: 29px;
+          height: 29px;
+          display: block;
+        }
+        .rc-message {
+          width: 29px;
+          margin-left: 8px;
+          height: 29px;
+          display: block;
+        }
+
+        strong {
+          font-style: normal;
+          list-style: none;
+          width: 30px;
+          height: 30px;
+          border: 1px solid #d7d7d7;
+          opacity: 1;
+          border-radius: 3px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          margin: 0 5px 0 5px;
+          color: #666666;
+        }
+      }
+      .certification {
+        .rc-button{
+          width: 100%;
+          padding-top: 33px;
+          display: flex;
+          align-items: center;
+          span{
+            width: 160px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 16px;
+color:#FFFFFF;
+display: block;
+display: flex;
+align-items: center;
+justify-content: center;
+          }
+          span:last-child{
+              margin-left: 40px;
+          }
+        }
+        margin-top: 16px;
+        ul {
+          display: flex;
+          flex-direction: column;
+          line-height:40px;
+          text-align: left;
+          li {
+            width: 100%;
+            float: left;
+            span {
+              font-size: 18px;
+              color: #333333;
+            }
+            i{
+              font-style: normal;
+              font-size: 16px;
+              color: #666666;
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/rc-busness/pages/productdetails/productlist.vue b/rc-busness/pages/productdetails/productlist.vue
new file mode 100644
index 00000000..12c949a6
--- /dev/null
+++ b/rc-busness/pages/productdetails/productlist.vue
@@ -0,0 +1,1202 @@
+<template>
+<div>
+  <Myheader></Myheader>
+<div class="rc-top">
+
+  <div class="rc-main">
+    <div class="usersearch">
+ 
+
+      <div class="usercontentshow" ref="usercontent">
+      <div class="rc-product">
+        <div class="rc-productcat">
+          <div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
+            <img :src="item.catimage" alt="" />
+            <span>{{ item.title }}</span>
+          </div>
+        
+        </div>
+      </div>
+
+      <div class="rc-prefecture">
+        <h2>专区:</h2>
+        <ol>
+          <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+
+        <div class="rc-age">
+        <h2>年龄:</h2>
+        <ol>
+          <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+            <div class="rc-age">
+        <h2>功能:</h2>
+        <ol>
+          <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+
+       <div class="rc-age">
+        <h2>品种:</h2>
+        <ol>
+          <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+  
+
+     <div class="rc-contair">
+         <ul>
+             <li v-for="(item,index) in rccontair" :key="index">
+               <div class="rc-click" @click="selectproduce(item)">
+                   <div  class="rc-rccontair">
+                   <img :src=item.picture alt="">   
+                   </div>
+                    <span>{{item.categoryName}}</span>
+                    <i>{{item.price}}</i>
+                    </div>
+                    <strong @click="userbuy()">立即购买</strong>
+             </li>
+         </ul>
+
+     </div>
+</div>
+    </div>
+
+
+    <div class="usershow" v-if="openshow">
+  <div class="rc-show">
+      
+</div>
+  </div>
+
+  </div>
+  <div v-if="isadrond">
+    <div class="rc-mubu" v-if="isshow" @click="usershow()">
+   </div>
+     <div class="rc-bottom"  v-if="isshow">
+  <div class="rc-bottoma" >
+        <div class="rc-productcat">
+          <div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
+            <img :src="item.catimage" alt="" />
+            <span>{{ item.title }}</span>
+          </div>
+       
+        </div>
+    <div class="rc-prefecture">
+        <h2>专区:</h2>
+        <ol>
+          <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+
+        <div class="rc-age">
+        <h2>年龄:</h2>
+        <ol>
+          <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+       <div class="rc-age">
+        <h2>功能:</h2>
+        <ol>
+          <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+
+       <div class="rc-age">
+        <h2>品种:</h2>
+        <ol>
+          <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+  </div>
+   <div class="rc-footer">
+
+     <span @click="usershow()">取消</span>
+     <em @click="usershow()">确定</em>
+   </div>
+
+  </div>
+  </div>
+
+    <el-dialog
+    :visible.sync="dialogInfo1"
+    hegight="700px"
+  
+    v-if="!isadrond"
+  >
+      
+     <div class="rc-bottom">
+  <div class="rc-bottoma" >
+        <div class="rc-productcat">
+          <div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
+            <img :src="item.name" alt="" />
+            <span>{{ item.title }}</span>
+          </div>
+       
+        </div>
+    <div class="rc-prefecture">
+        <h2>专区:</h2>
+        <ol>
+          <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+
+        <div class="rc-age">
+        <h2>年龄:</h2>
+        <ol>
+          <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+       <div class="rc-age">
+        <h2>功能:</h2>
+        <ol>
+          <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+
+       <div class="rc-age">
+        <h2>品种:</h2>
+        <ol>
+          <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
+            {{ item.title }}
+          </li>
+        </ol>
+      </div>
+  </div>
+  </div>
+
+   <div class="rc-button">
+     <span @click="openclose()">取消</span>
+     <em>确认</em>
+   </div>
+  </el-dialog>
+  </div>
+  </div>
+</template>
+
+<script>
+import Myheader from '~/components/header.vue' 
+  import { userstype,biaomessa } from "../../ajax/getData";
+export default {
+  data() {
+    return {
+      value: "",
+      activeIndex:0,
+      activeIndex1:0,
+      activeIndexa:'-1',
+      dialogInfo1:false,
+      activeIndexb:'-1',
+       activeIndexc:'-1',
+       activeIndexd:'-1',
+       activeIndexe:'-1',
+       activeIndexf:'-1',
+       isadrond:true,
+       isshow:false,
+       openshow:false,
+       direction:'btt',
+      searchdata: [
+        {
+          title: "猫罐头",
+          ordernum: "1",
+        },
+
+        {
+          title: "犬罐头",
+          ordernum: "2",
+        },
+        {
+          title: "布偶猫",
+          ordernum: "3",
+        },
+        {
+          title: "博美犬",
+          ordernum: "4",
+        },
+      ],
+
+      userproduct: [
+        {
+          title: "猫产品",
+          ordernum: "1",
+          catimage: require("../../assets/image/rc-cat.png"),
+        },
+
+        {
+          title: "犬产品",
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+      ],
+
+            catproduct: [
+        {
+          title: "猫产品",
+          ordernum: "1",
+          catimage: require("../../assets/image/rc-cat.png"),
+        },
+
+        {
+          title: "犬产品",
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+      ],
+
+      prefecture: [
+        {
+          title: "猫湿粮",
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+        {
+          title: "品种猫粮",
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+        {
+          title: "营养猫粮",
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+        {
+          title: "功能猫粮",
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+      ],
+      catage: [
+        {
+          title: "<4月龄",
+          ordernum: "1",
+        },
+        {
+          title: "4-12月龄",
+          ordernum: "2",
+        },
+        {
+          title: "1-7岁",
+          ordernum: "3",
+        },
+        {
+          title: ">7岁",
+          ordernum: "4",
+        },
+      ],
+          catagea: [
+        {
+          title: "绝育呵护",
+          ordernum: "1",
+        },
+        {
+          title: "口腔呵护",
+          ordernum: "2",
+        },
+        {
+          title: "美毛呵护",
+          ordernum: "3",
+        },
+        {
+          title: "去毛球",
+          ordernum: "4",
+        },
+      ],
+          catageb: [
+        {
+          title: "英短",
+          ordernum: "1",
+        },
+        {
+          title: "美短",
+          ordernum: "2",
+        },
+        {
+          title: "布偶",
+          ordernum: "3",
+        },
+        {
+          title: "暹罗",
+          ordernum: "4",
+        },
+      ],
+
+            rccontair: [
+        {
+          title: "皇家英国短毛猫全价湿粮",
+          price:'￥123.45',
+          ordernum: 1,
+
+          catimage: require("../../assets/image/rc-cat.png"),
+        },
+
+        {
+          title: "皇家英国短毛猫全价湿粮",
+           price:'￥123.45',
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+           {
+          title: "皇家英国短毛猫全价湿粮",
+           price:'￥123.45',
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+            {
+          title: "皇家英国短毛猫全价湿粮",
+           price:'￥123.45',
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+             {
+          title: "皇家英国短毛猫全价湿粮",
+           price:'￥123.45',
+          ordernum: "2",
+          catimage: require("../../assets/image/rc-dog.png"),
+        },
+      ],
+    };
+  },
+    components: {
+    Myheader,
+  },
+  mounted(){
+    this.usetmessage();
+this.stypemessage();
+  },
+  methods: {
+            async usetmessage() {
+      let data = await biaomessa();
+      if(data){
+        this.rccontair=data;
+      }
+      console.log( this.rccontair);
+    },
+    //全部标签的查找
+       async stypemessage() {
+      let data = await userstype();
+      if(data){
+         console.log(data);
+      }
+    },
+
+
+
+    userbuy(){
+      this.$router.push({
+        path: "/myorder/userrecord",
+        query: {
+          stype: 1,
+        },
+      });
+    },
+    openclose(){
+this.dialogInfo1=false;
+    },
+    selectproduce(){
+              this.$router.push({
+        path: "/productdetails/producted",
+        query: {
+          stype: 1,
+        },
+      });
+    },
+          ifadroind(){
+    var sUserAgent = navigator.userAgent.toLowerCase();
+    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
+    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
+    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
+    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
+    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
+    var bIsAndroid = sUserAgent.match(/android/i) == "android";
+    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
+    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
+ 
+    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
+      console.log("当前是电脑打开")
+       this.$nextTick(() => {
+    
+        this.isadrond=false;
+         this.dialogInfo1=true;
+          this.isadrond=false;
+            this.isshow=false;
+      
+        })
+      
+        
+    }else{
+        console.log("当前是手机打开")
+           this.$nextTick(() => {
+    
+        this.isadrond=true;
+        this.isshow=true;
+           this.$refs.usercontent.style.display='none  ';
+    this.dialogInfo1=false;
+      
+        })
+
+   
+}
+  },
+    //搜索
+    onSearch() {},
+       selectGoods(item, index) {
+         
+             this.activeIndex=index;
+             console.log('----');
+    },
+     selectGoodsa(item, index) {
+         
+             this.activeIndex1=index;
+             console.log('----');
+    },
+    userselect(){
+    this.$nextTick(() => {
+    
+       this.ifadroind();
+      console.log( this.$refs.usercontent)
+      
+        })
+    },
+    usershow(){
+        this.$nextTick(() => {
+      this.isshow=false;
+            // dom元素更新后执行，因此这里能正确打印更改之后的值
+            this.$refs.usercontent.style.display='block  ';
+        })
+    },
+
+       selectsearch(item, index) {
+         
+             this.activeIndexa=index;
+    },
+        selectage(item, index) {
+             this.activeIndexc=index;
+    },
+        selectagc(item, index) {
+             this.activeIndexd=index;
+    },
+        selectagd(item, index) {
+             this.activeIndexe=index;
+    },
+    selectproduct(item, index){
+          this.activeIndexb=index;
+    },
+           selectage(item, index) {
+             this.activeIndexc=index;
+    },
+           selectage(item, index) {
+             this.activeIndexc=index;
+    },
+    //弹框的显示隐藏
+  },
+    
+
+};
+</script>
+
+<style lang="less" scoped >
+.rc-top{
+  position: relative;
+}
+
+/deep/ .el-drawer{
+  height: 60%;
+}
+ul li ol li em strong i {
+  list-style: none;
+  font-style: normal;
+  
+}
+.rc-main {
+  width: 100%;
+  overflow: hidden;
+  margin-top:40px;
+
+  .usersearch {
+    width: 93%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+      .active{
+      border: 2px solid #E2001A;
+      color: #E2001A;
+      cursor: pointer;
+    }
+    .unactive{
+      border: 2px solid #d7d7d7;
+      color:#999999;
+      cursor: pointer;
+     }
+}
+
+//手机端
+@media screen and (max-width: 768px) {
+  .usercontentshow{
+      position: relative;
+        z-index: 997;
+  }
+  .rc-mubu{
+  height: 100%;
+  background: #333333;
+  opacity: 0.6;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 998;
+
+}
+.rc-bottom{
+  .rc-footer{
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+     span{
+       width: 155px;
+height: 48px;
+border: 2px solid #E1001A;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ color: #E1001A;
+border-radius: 30px;
+
+     }
+     em{
+       width: 155px;
+       margin-left: 25px;
+height: 48px;
+background: #E2001A;
+border-radius: 30px;
+font-size: 14px;
+color:#FFFFFF;
+display: flex;
+align-items: center;
+font-style: normal;
+justify-content: center;
+list-style: none;
+     }
+  }
+   .rc-cat{
+     margin-top: 24px;
+   }
+      .active{
+      border: 2px solid #E2001A;
+      color: #E2001A;
+      cursor: pointer;
+    
+    }
+    .unactive{
+      border: 2px solid #d7d7d7;
+      color:#999999;
+      cursor: pointer;
+    
+     }
+position: relative;
+    height: 100%;
+    height: 617px;
+    background: white;
+    z-index: 999;
+      .rc-productcat {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    .rc-cat {
+      width: 32%;
+      height: 34px;
+      background: #ffffff;
+      border-radius: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 16px;
+       font-size: 14px;
+      span {
+        margin-left: 3px;
+      }
+
+      img {
+        width: 24px;
+        height: 16px;
+      }
+   
+    }
+  }
+
+}
+
+  /deep/ .van-search__content {
+    width: 250px;
+    height: 32px;
+    border: 1px solid #d7d7d7;
+    border-radius: 200px;
+    background: white;
+  }
+  .rc-search {
+    width: 69px;
+    height: 32px;
+    background: #e1001a;
+    border-radius: 200px;
+    text-align: center;
+    color: white;
+  }
+  .rc-title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    color: #333333;
+    margin-top: 12px;
+    h2 {
+      font-size: 18px;
+      color: #333333;
+      margin-left: 12px;
+    }
+    span {
+      font-size: 14px;
+      color: #666666;
+      border-bottom: 1px solid #666666;
+      display: block;
+      margin-right: 8px;
+    }
+  }
+
+  .rc-variety {
+    ul {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      overflow: hidden;
+      width: 100%;
+      
+    }
+    ul li {
+      width: 80px;
+      height: 32px;
+      background: #ffffff;
+      border: 1px solid #d7d7d7;
+      border-radius: 100px;
+      text-align: center;
+      font-size: 14px;
+      float: left;
+      line-height: 32px;
+      margin-left: 11px;
+    }
+  }
+  .rc-product {
+    h2 {
+      font-size: 18px;
+      color: #333333;
+      margin-left: 12px;
+    }
+  }
+  .rc-productcat {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    .rc-cat {
+      width: 32%;
+      height: 34px;
+      background: #ffffff;
+      border-radius: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 16px;
+       font-size: 14px;
+      span {
+        margin-left: 3px;
+      }
+
+      img {
+        width: 24px;
+        height: 16px;
+      }
+   
+    }
+  }
+
+  .rc-productright {
+    display: flex;
+    align-items: center;
+    img {
+      width: 24px;
+      height: 20px;
+      margin-left: 15px;
+    }
+    span {
+      font-size: 14px;
+      color: #666666;
+      margin-left: 8px;
+    }
+  }
+
+  .rc-prefecture{
+      display: flex;
+      h2{
+          font-size: 16px;
+color: #333333;
+margin-left: 12px;
+      }
+        ol{
+          display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      font-size: 12px;
+      text-align: center;
+      width: 80%;
+        }
+        li{
+            width: 40%;
+height: 26px;
+background: #FFFFFF;
+border: 1px solid #D7D7D7;
+line-height: 26px;
+float: left;
+border-radius: 100px;
+margin-left: 9px;
+        }
+  }
+
+
+
+    .rc-age{
+      display: flex;
+      h2{
+          font-size: 16px;
+color: #333333;
+margin-left: 12px;
+      }
+        ol{
+          display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      font-size: 12px;
+      text-align: center;
+      width: 80%;
+        }
+        li{
+            width: 40%;
+height: 26px;
+background: #FFFFFF;
+border: 1px solid #D7D7D7;
+line-height: 26px;
+float: left;
+border-radius: 100px;
+margin-left: 9px;
+
+        }
+  }
+  .rc-contair{
+      margin-top: 24px;
+      .rc-rccontair{
+height:160px;display:flex;align-items: center
+      }
+      ul{
+          text-align: center;
+          align-items: center;
+          flex-wrap: nowrap;
+          li{
+              float: left;
+              width: 43%;
+              margin-top: 16px;
+background: #FFFFFF;
+border: 1px solid #D7D7D7;
+margin-left: 15px;
+display: inline-flex;
+border-radius: 3px;
+flex-direction: column;
+          }
+
+          img{
+              width: 85px;
+    display: flex;
+    margin: 0 auto;
+    height: 114px
+;
+          }
+          i{
+font-style: normal;
+              font-size: 18px;
+              margin-top: 8px;
+color: #666666;
+display: block;
+              
+          }
+      }
+      .rc-click{
+        max-height: 1.9rem;
+      }
+      span{
+ font-size: 0.16rem;
+    color: #666666;
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+    white-space: normal;
+      }
+      strong{
+          width: 130px;
+         height: 40px;
+border: 2px solid #E2001A;
+display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 30px;
+    margin: 0 auto;
+    font-size: 14px;
+color: #E2001A;
+margin-top: 8px;
+margin-bottom: 32px;
+      }
+  }
+}
+
+//pc端
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+/deep/.el-dialog {
+width: 920px;
+height: 570px;
+background: #FFFFFF;
+}
+  .rc-button{
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    width: 100%;
+    padding: 40px 0 40px 0;
+    span{
+width: 160px;
+height: 48px;
+border: 2px solid #E2001A;
+border-radius: 30px;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #E2001A;
+cursor: pointer;
+    }
+    em{
+      font-style: normal;
+      width: 164px;
+height: 48px;
+background: #E2001A;
+cursor: pointer;
+border-radius: 30px;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #FFFFFF;
+margin-left: 40px;
+    }
+  }
+.rc-bottom{
+   .rc-cat{
+     margin-top: 24px;
+   }
+      .active{
+      border: 2px solid #E2001A;
+      color: #E2001A;
+      cursor: pointer;
+    
+    }
+    .unactive{
+      border: 2px solid #d7d7d7;
+      color:#999999;
+      cursor: pointer;
+    
+     }
+      .rc-productcat {  
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    .rc-cat {
+    width: 237px;
+height: 48px;
+border-radius: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 16px;
+       font-size: 14px;
+      span {
+        margin-left: 3px;
+      }
+
+      img {
+        width: 24px;
+        height: 16px;
+      }
+   
+    }
+  }
+
+
+
+}
+  .form-search {
+    display: none;
+  }
+  .rc-title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    color: #333333;
+    margin-top: 12px;
+    h2 {
+      font-size: 18px;
+      color: #333333;
+      margin-left: 12px;
+    }
+    span {
+      font-size: 14px;
+      color: #666666;
+      border-bottom: 1px solid #666666;
+      display: block;
+      margin-right: 8px;
+    }
+    .rc-change{
+        display: none;
+    }
+  }
+
+  .rc-variety {
+      margin-top: 30px;
+    ul {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      overflow: hidden;
+      width: 100%;
+      
+      
+    }
+    ul li {
+      width: 80px;
+      height: 32px;
+      background: #ffffff;
+      border: 1px solid #d7d7d7;
+      border-radius: 100px;
+      text-align: center;
+      font-size: 14px;
+    //   color: #999999;
+      float: left;
+      line-height: 32px;
+      margin-left: 11px;
+    }
+  }
+  .rc-product {
+      margin-top: 30px;
+    h2 {
+      font-size: 18px;
+      color: #333333;
+      margin-left: 12px;
+    }
+  }
+  .rc-productcat {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    .rc-cat {
+      width: 237px;
+height: 48px;
+border-radius: 30px;
+      background: #ffffff;
+    
+      border-radius: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 16px;
+      font-size: 14px;
+      span {
+        margin-left: 3px;
+      }
+
+      img {
+        width: 24px;
+        height: 16px;
+      }
+  
+    }
+  }
+
+  .rc-productright {
+    display: flex;
+    align-items: center;
+    img {
+      width: 24px;
+      height: 20px;
+      margin-left: 15px;
+    }
+    span {
+      font-size: 14px;
+      color: #666666;
+      margin-left: 8px;
+    }
+  }
+
+  .rc-prefecture{
+      display: flex;
+      margin-top: 47px;
+      h2{
+          font-size: 20px;
+color: #333333;
+margin-left: 12px;
+      }
+        ol{
+          display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      font-size: 12px;
+      text-align: center;
+      width: 80%;
+        }
+        li{
+            width: 130px;
+height: 40px;
+border: 2px solid #D7D7D7;
+opacity: 1;
+border-radius: 30px;
+background: #FFFFFF;
+line-height: 40px;
+float: left;
+margin-left: 40px;
+color: #999999;
+        }
+  }
+
+    .rc-age{
+      display: flex;
+    
+      h2{
+          font-size: 20px;
+color: #333333;
+margin-left: 12px;
+      }
+        ol{
+          display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      font-size: 12px;
+      text-align: center;
+      width: 80%;
+        }
+        li{
+            margin-left: 40px;
+            width: 130px;
+height: 40px;
+border: 2px solid #D7D7D7;
+border-radius: 30px;
+background: #FFFFFF;
+line-height: 40px;
+float: left;
+color: #999999;
+        }
+  }
+
+
+
+  .rc-contair{
+      margin-top: 40px;
+      ul{
+          text-align: center;
+          align-items: center;
+          flex-wrap: nowrap;
+          width: 100%;
+          overflow: hidden;
+          li{
+              float: left;
+              width: 21%;
+              margin-top: 16px;
+height: 560px;
+background: #FFFFFF;
+border: 1px solid #D7D7D7;
+margin-left: 40px;
+border-radius: 3px;
+          }
+
+          img{
+              width: 85px;
+    display: flex;
+    margin: 0 auto;
+    height: 114px
+;
+          }
+          i{
+font-style: normal;
+              font-size: 22px;
+              margin-top: 8px;
+color: #666666;
+display: block;
+              
+          }
+      }
+      span{
+          overflow:hidden; 
+text-overflow:ellipsis;
+-webkit-box-orient:vertical;
+-webkit-line-clamp:2; 
+display: flex;
+font-size: 30px;
+color: #E2001A;
+margin-top: 8px;
+    width: 256px;
+    text-align: center;
+    margin: 0 auto;
+      }
+      strong{
+          width: 134px;
+         height: 40px;
+border: 2px solid #E2001A;
+display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 30px;
+    margin: 0 auto;
+    font-size: 14px;
+color: #E2001A;
+margin-top: 8px;
+      }
+
+           .rc-rccontair{
+height:320px;display:flex;align-items: center
+      }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/rc-busness/pages/productdetails/userdetails.vue b/rc-busness/pages/productdetails/userdetails.vue
new file mode 100644
index 00000000..65c02fc1
--- /dev/null
+++ b/rc-busness/pages/productdetails/userdetails.vue
@@ -0,0 +1,195 @@
+<template>
+<div>
+    <Myheader></Myheader>
+  <div class="rc-main">
+      
+     <div class="rc-header">
+         <ul>
+             <li v-for="(item,index) in usernewlist" :key="index" @click="usertiao(item,index)">
+                 <span>{{item.price}}</span>
+                 <img :src=item.catimage alt="">
+             </li>
+         </ul>
+     </div>
+
+  </div>
+  </div>
+</template> 
+
+<script>
+import Myheader from '~/components/header.vue' 
+  import { biaomessage } from "../../ajax/getData";
+export default {
+data(){
+ return{
+        usernewlist: [
+        {
+          price: "登录/注册",
+        
+         catimage: require("../../assets/image/rc-left.png"),
+        },
+        {
+          price: "猫",
+         
+        catimage: require("../../assets/image/rc-left.png"),
+        },
+            {
+          price: "犬",
+        
+          catimage: require("../../assets/image/rc-left.png"),
+        },
+        {
+          price: "选购产品",
+         
+          catimage: require("../../assets/image/rc-left.png"),
+        },
+          {
+          price: "个人中心",
+        
+           catimage: require("../../assets/image/rc-left.png"),
+        },
+        {
+          price: "关于我们",
+         
+          catimage: require("../../assets/image/rc-left.png"),
+        },
+      ],
+ }
+},
+methods:{
+
+         async usetmessage() {
+      let data = await biaomessage();
+      if(data){
+        this.usernewlist=data;
+      }
+      console.log(data);
+    },
+    usertiao(item,index){
+       if(item.price=='登出'){
+              this.$router.push({
+        path: "/productdetails/userdetails",
+      
+      });
+       this.usernewlist[0].price='登录/注册'
+       }
+    },
+usertiao(item,index){
+if(item.price=='登录/注册' ||index==0){
+            this.$router.push({
+        path: "/userlogin/login",
+        query: {
+          stype: 1,
+        },
+      });
+      
+}if(item.price=='登出'){
+   localStorage.clear();
+  this.usernewlist[0].price='登录/注册'
+}
+
+ if(item.price=='猫'){
+              this.$router.push({
+        path: "/productdetails/productlist/",
+        query: {
+          stype: 1,
+        },
+      });
+      
+}
+else if(item.price=='犬'){
+            this.$router.push({
+        path: "/productdetails/productlist/",
+        query: {
+          stype: 1,
+        },
+      });
+      
+}
+else if(item.price=='选购产品'){
+            this.$router.push({
+        path: "/productdetails/productlist/",
+        query: {
+          stype: 1,
+        },
+      });
+      
+}
+else if(item.price=='个人中心'){
+  console.log('----')
+            this.$router.push({
+        path: "/personal/mypersonal",
+        query: {
+          stype: 1,
+        },
+      });
+      
+}
+// else if(index=5){
+//             this.$router.push({
+//         path: "/personal/mypersonal",
+     
+//       });
+      
+// }
+}
+},
+mounted(){
+  let user= JSON.parse(localStorage.getItem("userInfo"));
+  console.log(user);
+   console.log(this.usernewlist[0].price);
+    if(user==''||user==null){
+      this.usernewlist[0].price='登录/注册'
+    }else{
+          this.usernewlist[0].price='登出'
+        
+    }
+   
+
+},
+components:{
+Myheader
+    
+}
+}
+</script>
+
+<style lang="less" scoped >
+//手机端
+@media screen and (max-width: 768px) {
+  .rc-header{
+    width: 92%;
+    margin: 0 auto;
+    ul{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+       flex-direction: column;
+       border-bottom: 1px solid #D7D7D7;
+      li{
+          height: 60px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #D7D7D7;
+           span{
+                     font-size: 16px;
+
+color: #444444;
+           }
+           img{
+             width: 8px;
+             height: 16px;
+             display: block;
+           }
+      }
+    }
+  }
+}
+//    /* 最小768px最大1920 *pc端/
+@media screen and (min-width: 768px) and (max-width: 1920px) {
+
+
+}
+</style>
\ No newline at end of file