update

src/business/goods/index.ts

@@ -42,6 +42,7 @@ export function useWrstandardDetails(wrstandardid: number) {
     const details = shallowRef<Partial<Model.THJWrstandardDetailRsp>>({})
 
     const getWrstandardDetails = () => {
+        console.log('ddddd', wrstandardid)
         return queryTHJWrstandardDetail({
             data: {
                 wrstandardid,
@@ -60,10 +61,10 @@ export function useWrstandardDetails(wrstandardid: number) {
 
 
 // 添加用户商品收藏信息
-export function useAddUserFavoriteGoods(goodsid: number) {
+export function useAddUserFavoriteGoods() {
     const { getUserId } = useLoginStore()
 
-    const getAddUserFavoriteGoods = () => {
+    const getAddUserFavoriteGoods = (goodsid: number) => {
         return addUserFavoriteGoods({
             data: {
                 userID: getUserId(),
@@ -78,10 +79,10 @@ export function useAddUserFavoriteGoods(goodsid: number) {
 
 
 // 移除用户商品收藏信息
-export function useRemoveUserFavoriteGoods(goodsid: number) {
+export function useRemoveUserFavoriteGoods() {
     const { getUserId } = useLoginStore()
 
-    const getRemoveUserFavoriteGoods = () => {
+    const getRemoveUserFavoriteGoods = (goodsid: number) => {
         return removeUserFavoriteGoods({
             data: {
                 userID: getUserId(),

src/packages/mobile/router/index.ts

@@ -128,12 +128,20 @@ const routes: Array<RouteRecordRaw> = [
     component: Page,
     children: [
       {
-        path: '',
+        path: 'product',
         name: 'product',
         component: () => import('../views/product/index.vue'),
         meta: {
           ignoreAuth: true,
         },
+      },
+      {
+        path: 'productdetail',
+        name: 'product-detail',
+        component: () => import('../views/product/detail/index.vue'),
+        meta: {
+          ignoreAuth: true,
+        },
       }
     ]
   },

src/packages/mobile/views/product/detail/index.vue

@@ -0,0 +1,70 @@
+<template>
+    <app-view class="productdetail">
+      <template #header>
+        <app-navbar class="productdetail__header" title="商品详情" />
+      </template>
+      <Swipe :autoplay="3000" indicator-color="white" lazy-render>
+        <SwipeItem v-for="(item, index) in topBanners" :key="index">
+          <img :src="getImageUrl(item)" />
+        </SwipeItem>
+      </Swipe>
+      
+      <div class="goods-details__container">
+            <div class="goods-details__container price">
+                <span>{{ details.goodsinfo?.wrstandardname }}</span>
+                <span> 参考价 {{ details.goodsinfo?.spotgoodsprice ?? 0.0 }}元/{{ getGoodsUnitName(details.goodsinfo?.unitid) }} </span>
+                <Button icon="{{ active === 0 ? 'star-o' : 'start' }}" @click="favorite"></Button>
+            </div>
+            <Divider>历史价格走势</Divider>
+            <Divider>商品详情</Divider>
+            <div class="">
+                <template v-for="(url, index) in goodsImages" :key="index">
+                    <img :src="url" alt="" />
+                </template>
+            </div>
+        </div>
+    </app-view>
+</template>
+
+<script lang="ts" setup>
+
+import { computed } from 'vue'
+import { useNavigation } from '@/hooks/navigation'
+import { Divider, Swipe, SwipeItem, Button } from 'vant'
+import { getImageUrl } from "@/filters";
+import { useWrstandardDetails, useAddUserFavoriteGoods, useRemoveUserFavoriteGoods } from '@/business/goods'
+import { getGoodsUnitName } from '@/constants/unit'
+
+const { getQueryStringToNumber } = useNavigation()
+const wrstandardid = getQueryStringToNumber('wrstandardid')
+var active = getQueryStringToNumber('active')
+const { details, getWrstandardDetails } = useWrstandardDetails(wrstandardid)
+const { getAddUserFavoriteGoods } = useAddUserFavoriteGoods()
+const { getRemoveUserFavoriteGoods } = useRemoveUserFavoriteGoods()
+
+// 商品图片列表
+const goodsImages = computed(() => {
+    const pictureurls = details?.value.goodsinfo?.pictureurls ?? ''
+    return pictureurls.split(',').map((path) => getImageUrl(path))
+})
+
+// 商品banner
+const topBanners = computed(() => {
+    const bannerpicurls = details?.value.goodsinfo?.bannerpicurl ?? ''
+    return bannerpicurls.split(',').map((path) => getImageUrl(path))
+})
+
+/// 收藏
+const favorite = () => {
+    if (active === 0) {
+        active = 1
+        getAddUserFavoriteGoods(wrstandardid)
+    } else {
+        active = 0 
+        getRemoveUserFavoriteGoods(wrstandardid)
+    }
+}
+
+getWrstandardDetails()
+    
+</script>

src/packages/mobile/views/product/index.vue

@@ -18,46 +18,46 @@
             <template #title>
               <img :src="getImageUrl(item.bannerpicurl)" />
               <span>{{ item.wrstandardname }}</span>
-              <Button type="primary" round size="small">立即进入</Button>
+              <Button type="primary" round size="small" @click="$router.push({name: 'product-detail', query: { wrstandardid: item.wrstandardid, active: active } })">立即进入</Button>
             </template>
           </Cell>
         </template>
       </app-pull-refresh>
     </app-view>
-  </template>
+</template>
   
-  <script lang="ts" setup>
-  import { shallowRef, ref } from 'vue'
-  import { Cell, Tabs, Tab, Button, Empty } from 'vant'
-  import { getImageUrl } from '@/filters'
-  import { useQueryTHJProductLists } from '@/business/goods'
-  import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
-  
-  const { pageIndex, pageCount, getQueryTHJProductLists, active } = useQueryTHJProductLists()
-  const pullRefreshRef = shallowRef()
-  const dataList = shallowRef<Model.THJProductRsp[]>([])
-  const error = shallowRef(false)
+<script lang="ts" setup>
+import { shallowRef } from 'vue'
+import { Cell, Tabs, Tab, Button, Empty } from 'vant'
+import { getImageUrl } from '@/filters'
+import { useQueryTHJProductLists } from '@/business/goods'
+import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+
+const { pageIndex, pageCount, getQueryTHJProductLists, active } = useQueryTHJProductLists()
+const pullRefreshRef = shallowRef()
+const dataList = shallowRef<Model.THJProductRsp[]>([])
+const error = shallowRef(false)
 
-  // Tab触发
+// Tab触发
 const onClickTab = () => {
-  pullRefreshRef.value?.refresh()
+pullRefreshRef.value?.refresh()
 }
-  
+
 const onRefresh = (finish: () => void) => {
-  /// 获取产品列表
-  getQueryTHJProductLists().then((res) => {
-    if (pageIndex.value === 1) {
-      dataList.value = []
-    }
-    dataList.value.push(...res)
-  }).catch(() => {
-    error.value = true
-  }).finally(() => {
-    finish()
-  })
+/// 获取产品列表
+getQueryTHJProductLists().then((res) => {
+  if (pageIndex.value === 1) {
+    dataList.value = []
+  }
+  dataList.value.push(...res)
+}).catch(() => {
+  error.value = true
+}).finally(() => {
+  finish()
+})
 }
 
-  </script>
+</script>
 
 <style lang="less">
 @import './index.less';

src/types/model/goods.d.ts

@@ -112,6 +112,7 @@ declare namespace Model {
         }[];
         goodsinfo: {
             pictureurls: string; // 详情图片(逗号分隔)
+            bannerpicurl: string;  // bannerpicurl(逗号分隔)
             spotgoodsprice: number; // 现货价格
             unitid: number; // 现货商品单位ID
             wrstandardcode: string; // 现货商品代码